Bom estou montando um input personalizado com o estilo do material design do google.
O efeito esta funcionando no input, porém no select não esta dando certo. Alguém sabe o que estou fazendo errado?
OBS: O efeito a qual eu me refiro é o da linha azul que fica em baixo do select.
$(document).ready(function() {
// Efeito do label
$('.form_campos').on('focus blur', function(e) {
$(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
$(this).parents('.form-group').toggleClass('animate', (e.type === 'focus'));
}).trigger('blur');
$('.select').on('change blur', function(e) {
$(this).parents('.form-group-select').toggleClass('focused', (e.type === 'focus' || this.value !== ''));
}).trigger('blur');
// Auto focus
$(".autofocus").trigger('focus');
// Verifica se o input esta disabilitado
$('input:disabled').addClass('form_disabled');
// Verifica se o select esta disabilitado
$('select:disabled').addClass('select_disabled');
// Converte minusculas em maiusculas
$('input').not('[name="link"]').on('input', function() {
// Armazena posição corrente do cursor
var start = this.selectionStart,
end = this.selectionEnd;
this.value = this.value.toUpperCase();
// Restaura posição armazenada anteriormente.
this.setSelectionRange(start, end);
});
});
/* Input */
.form-group {
margin-top: 20px;
position: relative;
display: flex;
height: 45px;
float: left;
}
.form-group::after {
width: 100%;
height: 2px;
background: #0091FF;
position: absolute;
left: 0;
bottom: 0;
content: '';
transform: scaleX(0);
transition: ease-in-out 240ms all;
}
.form-group.animate::after {
transform: scaleX(1);
}
.control-label {
opacity: 0.4;
pointer-events: none;
position: absolute;
transform: translate3d(5px, 22px, 0) scale(1);
transform-origin: left top;
transition: 240ms;
}
.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;
align-self: flex-end;
padding: 5px;
outline: none;
border: 0 solid #484848;
border-bottom-width: 1px;
background: transparent;
border-radius: 0;
}
.form_campos:hover,
.form_campos:focus {
border-color: #0091FF;
}
.form_disabled,
.form_disabled:hover,
.form_disabled:focus {
border-color: #D7D7D7;
}
/* Select */
.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::after {
width: 100%;
height: 1px;
background: #0091FF;
position: absolute;
left: 0;
bottom: 0;
content: '';
transform: scaleX(0);
transition: ease-in-out 240ms all;
}
select::-ms-expand {
display: none;
}
.select:hover,
.select:focus {
border: 0 solid;
border-bottom-width: 2px;
border-color: #0091FF;
transform: scaleX(1);
}
.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;
}
.select_disabled,
.select_disabled:hover,
.select_disabled:focus {
border: 0 solid;
border-bottom-width: 1px;
border-color: #D7D7D7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='form-group'>
<label class='control-label' for='nome'>NOME</label>
<input type='text' class='form_campos' id='nome' name='nome'>
</div>
<br><br><br><br><br><br>
<div class='form-group-select'>
<label class='control-label'>GOSTOU?</label>
<select name='gostou' class='select form_campos'>
<option value="s">SIM xxxxxxxxxxxxxx</option>
<option value="n">NÃO xxxxxxxxxxxxxx</option>
</select>
</div>