effect on input using jQuery

Question

Guys I’m making a input with an effect similar to that of Android. Good here in this example I put a input and a select. The input is working perfectly, when he is with the Focus he turns blue. However select it doesn’t turn blue, someone can help me solve it?

$('.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:"\279C";
    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>


<div class='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>

Answer 1

That’s because your class select overlap, just add the color of the border on select:hover.

.select:hover, .select:focus {
    border: 0 solid;
    border-bottom-width: 1px;
    border-color: #0091FF;
}

Now get it working:

$('.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;
    border-color: #0091FF;
}
.form-group-select {
    margin-top: 20px;
    position: relative;
    height: 45px;
    float: left;
}
.form-group-select:after {
    content:"\279C";
    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>


<div class='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>