see this example I'm doing about customizing a select and an input
Note the effect of the input, click on the text box and you will see that the bottom edge has a nice smooth effect, even beauty.
The problem is that I am not able to apply this same effect by placing the mouse on the 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!