I'm putting together a custom input with the style of google's design material.
The effect is working in the input, but in the select is not working. Does anyone know what I'm doing wrong?
NOTE: The effect I'm referring to is the blue line below the 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: "9C";
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><divclass='form-group'><labelclass='control-label'for='nome'>NOME</label><inputtype='text'class='form_campos'id='nome'name='nome'></div><br><br><br><br><br><br><divclass='form-group-select'><labelclass='control-label'>GOSTOU?</label><selectname='gostou'class='selectform_campos'><optionvalue="s">SIM xxxxxxxxxxxxxx</option>
<option value="n">NÃO xxxxxxxxxxxxxx</option>
</select>
</div>