Customize select and understand the CSS effect

Question

see this example I’m doing about customization of a select and an input

http://codepen.io/anon/pen/peVNoq

Note the input effect, click on the text box and you will see that the bottom edge has a nice smooth effect, until then beauty.

The problem is that I am not managing to apply this same effect when putting the mouse on select, I am not able to understand this logic of how to apply this same effect.

body{
	background: #3A3D41;
  font-size: 13px;
  font-family: 'roboto', sans-serif;
}
input::-webkit-input-placeholder, button {
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
input {
  margin: 0px 0px;
  width: 200px;
  display: block;
  border: none;
  padding: 9.2px 0;
  border-bottom: solid 1px #2CB8FF;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #2CB8FF 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #2CB8FF 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: #2CB8FF;
}
input:focus, input:valid {
 box-shadow: none;
 outline: none;
 background-position: 0 0;
}

/* select */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

label[for=favcity] {
  position: relative;
  display: block;
  width: 200px;
  overflow: hidden;
  cursor: pointer;
}

label[for=favcity]::after {
  content: ' ';
  position: absolute;
  right: 0;
  top: 0;
  width: 18px;
  height: 36px;
  display: block;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAFAgMAAAABCpX7AAAACVBMVEUAAAAsuP8suP899h0QAAAAAnRSTlMAoKBFbtAAAAAcSURBVAjXY8haNYFBapUDA9tKBgbGJQwMDAEMADbjBE1jRaTxAAAAAElFTkSuQmCC') no-repeat center center;
  pointer-events: none;
}

label[for=favcity] select {
  color: #fff;
  border: 0px;
  border-bottom: 1px solid #2CB8FF;
  background: transparent;
  padding: 9px;
  width: 100%;
  cursor: pointer;
}

label[for=favcity] select:hover {
  border-bottom: 2px solid #2CB8FF;
}

label[for=favcity] select::-ms-expand {
    display: none;
}

label[for=favcity] :-moz-any(select) {
  width: 110%;
}

label[for=favcity].ie9 select {
  width: 110%;
}

label[for=favcity] select:focus {
  outline: 0px dotted #A9A9A9;
}

.favcity option {
    background-color: black;
    color: #fff;
}

<div style="width: 750px; background-color: red">

  <div style="float:left; width: 210px;">
    <!--[if gte IE 9]><label for="favcity" class="ie9"><![endif]-->
    <!--[if !IE]><!--><label for="favcity"><!--<![endif]-->
      <select class="favcity" name="select">
        <option value="0">Nomes</option>
        <option value="1">Ana Paula</option>
        <option value="2">Patrique</option>
        <option value="3">Sara</option>
        <option value="4">Bernadethe</option>
        <option value="5">Lucrécio</option>
      </select>
    </label>
  </div>

  <div style="float:left; width: 210px;">
    <!--[if gte IE 9]><label for="favcity" class="ie9"><![endif]-->
    <!--[if !IE]><!--><label for="favcity"><!--<![endif]-->
      <select class="favcity" name="select">
        <option value="0">Idades</option>
        <option value="1">10 anos</option>
        <option value="2">20 anos</option>
        <option value="3">30 anos</option>
        <option value="4">40 anos</option>
        <option value="5">50 anos</option>
      </select>
    </label>
  </div>

  <div style="float:left; width: 200px;">
    <input placeholder="Diga algo..." type="text" required>
  </div>

</div>

Thank you!