I'm making a input
with an effect equal to Android. Well here in this example I put input
and select
. input
is working perfectly, when it is with the focus it turns blue. But select
does not turn blue, can anyone help me solve this?
$('.form_campos').on('focus blur',
function (e) {
$(this).parents('.form-group').toggleClass('focused', (e.type==='focus' || this.value.length > 0));
}
).trigger('blur');
$('.select').on('change blur',
function (e) {
$(this).parents('.form-group-select').toggleClass('focused', (e.type==='focus' || this.value !==''));
}
).trigger('blur');
.form-group {
margin-top: 20px;
position: relative;
display: flex;
height: 45px;
float: left;
}
.control-label {
opacity: 0.4;
pointer-events: none;
position: absolute;
transform: translate3d(5px, 22px, 0) scale(1);
transform-origin: left top;
transition: 240ms;
z-index: 2;
}
.form-group.focused .control-label, .form-group-select.focused .control-label {
opacity: 1;
transform: scale(0.75);
}
.form_campos {
height: 31px;
width: 100%;
color: #484848;
z-index: 1;
align-self: flex-end;
padding: 5px;
outline: none;
border: 0 solid #484848;
border-bottom-width: 1px;
background: transparent;
}
.form_campos:hover, .form_campos:focus {
border-color: #0091FF;
}
.form_disabled, .form_disabled:hover, .form_disabled:focus {
border-color: #D7D7D7;
}
.select {
height: 31px;
color: #484848;
border-radius: 0;
border: 0 solid #484848;
border-bottom-width: 1px;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
outline: none;
margin-top: 14px;
background: transparent;
padding-right: 20px;
text-overflow: ellipsis;
overflow: hidden;
}
select::-ms-expand {
display: none;
}
.select:hover, .select:focus {
border: 0 solid;
border-bottom-width: 1px;
}
.form-group-select {
margin-top: 20px;
position: relative;
height: 45px;
float: left;
}
.form-group-select:after {
content:"9C";
color:#484848;
transform:rotate(90deg);
right:8px;
top:22px;
position:absolute;
pointer-events:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><divclass='form-group-select'style="width: 400px;" >
<label class='control-label'>PEDIDOS</label>
<select name='status' class='select form_campos'>
<option value=''></option>
<option value='1'>opção1</option>
<option value='0'>opção2</option>
</select>
</div>
<br><br><br><br><br><br>
<div class='form-group' style="width: 400px;" >
<label class='control-label' for='inputNormal'>nome</label>
<input type='text' class='form_campos' id='inputNormal' name="ids">
</div>