Well, I've created a very precise system and input with that of android, I've used CSS and jQuery.
But I wanted to put a precise effect on the google lite material. Here's the example link: link
I do not want to use the lite material because my goal is to try to make an input based on the lite material.
Does anyone know how to do this?
Follow the code I've already put up.
$(document).ready(function() {
$('.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');
$(".autofocus").trigger('focus');
// 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);
});
});.form-group {
margin-top: 20px;
position: relative;
display: flex;
height: 45px;
float: left;
width: 400px;
}
.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.focused::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;
}<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>
<div class='form-group'>
<label class='control-label' for='idade'>idade</label>
<input type='text' class='form_campos' id='idade' name='nome'>
</div>