Bom montei um sistema e input bem preciso com o do android, usei CSS e jQuery.
Porém queria colocar um efeito preciso com o do material lite do google. Segue o link do exemplo: https://getmdl.io/components/index.html#textfields-section
Não quero usar o material lite pois o meu objetivo e tentar fazer um input baseando no material lite.
Alguém sabe como fazer isso?
Segue o código que ja montei.
$(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>