effect on input with jQuery

Question

Well I set up a system and very precise input with android, I used CSS and jQuery.

But I wanted to put an accurate effect with the Google lite material. Follow the example link: https://getmdl.io/components/index.html#textfields-Section

I don’t want to use lite material because my goal is to try to input based on lite material.

Someone knows how to do it?

Follow the code I’ve built.

$(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>

Answer 1

You can add a ::after in his css with the lower edge format, and use the Transform property to resize it when focusing

Below is an example: html

<div class='form-group'>
    <label class='control-label' for='nome'>NOME</label>
    <input type='text' class='form_campos' id='nome' name='nome'>
    <div class="under"></div>
</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 class="under"></div>
</div>

CSS

.form-group .under {
    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 input:focus + .under {
    transform:scaleX(1);
}