<div class="wrapper">
  <div class="material-textfield blue">
    <input type="text" required/>
    <label data-content="username">username</label>
  </div>
  
  <div class="material-textfield red">
     <input type="password" required/>
     <label data-content="password">password</label>
  </div>
</div>
// ---------- BOOTSTRAP
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700)

.wrapper
    align-items: center
    display: flex
    flex-direction: column
    justify-content: center

$sans-serif: Roboto, Arial, sans-serif

// ---------- COMPONENT
.material-textfield
    display: inline-block
    height: 4rem
    padding-top: 2rem

    input
        background: none
        border: none
        box-sizing: border-box
        display: block
        font-family: $sans-serif
        font-size: 1rem
        padding: 0.25rem 0.1rem
        width: 100%

    input:invalid
        box-shadow: none

    input:focus
        outline: none

    label
        display: inline-block
        font-family: $sans-serif
        font-size: 0
        pointer-events: none
        position: relative
        text-transform: uppercase
        width: 100%

    label::before
        content: attr(data-content)
        position: relative
        transition: all 0.2s ease
        will-change: font-size, top

    label::after
        bottom: 0.9rem
        content: ''
        height: 0.3rem
        left: 50%
        position: absolute
        transition: all 0.2s ease
        width: 0
        will-change: width, left

    label::before, input[required]:focus ~ label::before
        font-size: 0.75rem
        top: -3.25rem

    input:focus ~ label::after
        left: 0%
        width: 100%

    input:invalid ~ label::before
        font-size: 1rem
        top: -2rem

// ---------- CONSTRUCTOR
@mixin material-textfield($name, $lightcolor, $color, $darkcolor)
    .material-textfield.#{$name}
        input
            border-bottom: 0.1rem solid $color
            color: $darkcolor

        label::after
            background: $color

        label::before, input[required]:focus ~ label::before
            color: $lightcolor

        input:invalid ~ label::before
            color: $color

// ---------- INCLUDE COMPONENTS
$blue: #03A9F4
$lightblue: lighten($blue, 15%)
$darkblue: darken($blue, 15%)

$red: #F44336
$lightred: lighten($red, 15%)
$darkred: darken($red, 15%)

@include material-textfield("blue", $lightblue, $blue, $darkblue)
@include material-textfield("red", $lightred, $red, $darkred)
View Compiled
// No JavaScript! ¯\_(ツ)_/¯

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.