Material Input

Text fields allow users to input, edit, and select text. Text fields typically reside in forms but can appear in other places, like dialog boxes and search.

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
    <p class="material-input">
      <input type="text" class="material-input-field" name="field-1-0" id="field-1-0" placeholder=" ">
      <label for="field-1-0">Your email</label>
      <span class="material-input-border"></span>
      <span class="material-input-helper">Please add your email</span>
    </p>
  </div>
</div>
<div class="align grey">
  <div class="align-bis">
    <p class="material-input reverse">
      <input type="text" class="material-input-field" name="field-1-1" id="field-1-1" placeholder=" ">
      <label for="field-1-1">Your email</label>
      <span class="material-input-border"></span>
    </p>    
  </div>
</div>
<div class="align">
  <div class="align-bis">
    <p class="material-input to-exterior">
      <input type="text" class="material-input-field" name="field-1-2" id="field-1-2" placeholder=" ">
      <label for="field-1-2">Your email</label>
      <span class="material-input-border"></span>
    </p>    
  </div>
</div>
<div class="align grey">
  <div class="align-bis">
    <p class="material-input to-exterior">
      <input type="text" class="material-input-field" name="field-1-3" id="field-1-3" placeholder=" " disabled>
      <label for="field-1-3">Your email</label>
      <span class="material-input-border"></span>
    </p>    
  </div>
</div>

<div class="align">
  <div class="align-bis">
    <p class="material-input to-exterior is-invalid">
      <input type="text" class="material-input-field" name="field-1-4" id="field-1-4" placeholder=" ">
      <label for="field-1-4">Your email</label>
      <span class="material-input-border"></span>
      <span class="material-input-helper">Your email is invalid :(</span>
    </p>    
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

$primary : #03A9F4;
$grey : rgba(0,0,0,0.54);
$grey-active : rgba(0,0,0,0.42);
$white : rgba(255,255,255,0.7);

$error : #ef5350;
$succes : #8BC34A;
$transition : all 0.4s ease-out;



* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.align{
  display: flex;
  &-bis{
    flex: 1;
    display:flex;
    justify-content: center;
    padding: 60px 0;
  }
  &.grey{
    background-color: rgb(245,245,245);
  }
}

$this:  ".material-input";

#{$this}{
  margin-top: 55px;
  width: 40%;
  &:first-of-type{
    margin-top:0;
  }
}

#{$this}{
  position:relative;
  &.black{
    label{
      color: $white;
    }
    input{
      color: #fff;
      border-bottom-color: $white;
    }
    span{
      color: $white;
    }
  }
  &.is-invalid{
    span, label{
      color:$error;
    }
    input{
      border-bottom-color: $error;
      border-bottom-width: 2px;
    }
  }
  
  // Animation .to-exterieur
  &.to-exterior{
    #{$this}-border{
      &:after{
        left: 50%;
        right: 50%;
      }
    }
    input{
      &:focus, &.is-focus{
        + label + span{
          &:after{
            left: 0;
            right: 0;
          }
        }
      }
    }
  }
  
  // Animation .reverse
  &.reverse{
    #{$this}-border{
      &:after{
        right: 0;
        left: auto;
        width: 0;
      }
    }  
    input{
      &:focus, &.is-focus{
        + label + span{
          &:after{
            left: 0;
            width: 100%;
          }
        }
      }
    }
  }
  
  label{
    position: absolute;
    top: 8px;
    color: $grey;
    font-size: 16px;
    transition: $transition;
    right:0;
    left: 0;
    cursor: text;
  }
  &-border{
    border-bottom: solid 1px $grey;
    display: block;
    position:relative;
    &:after{
      transition: $transition;
      content:"";
      height:2px;
      left:0;
      right: 100%;
      position:absolute;
     ...

JavaScript

//
// Que du Css, pas de JS mais compatibilité pas au top ...
// Le selecteur :placeholder-shown est encore très mal supporté helas.
// https://www.w3.org/TR/selectors-4/#placeholder
// https://caniuse.com/#feat=css-placeholder-shown
//
// La meilleur solution est de gérer le focus soit en JS soit avec l'ajout d'une classe soit avec le selecteur
// input:not([value=""]):not(:focus) + label

$('.material-input-field').on({
	focusout: function(){
  	$(this).removeClass('is-focus');
  },
  focusin: function(){
  	$(this).addClass('is-focus');
  },
  keyup: function() {
  	$(this).attr('value', $(this).val());
  }
});