form
  .form-field.example-bad
    input.input(type="text", placeholder="Email")
    
  .form-field.example-good
    input.input(type="text", placeholder="Email")
View Compiled
placeholder()
  &::-webkit-input-placeholder
    {block}
  &:-moz-placeholder
    {block}
  &::-moz-placeholder
    {block}
  &:-ms-input-placeholder
    {block}

@font-face
  font-family: 'AltisMedium'
  src: url('https://mojotech-static.s3.amazonaws.com/m4/fonts/altis/altis-medium-webfont.eot')
  src: url('https://mojotech-static.s3.amazonaws.com/m4/fonts/altis/altis-medium-webfont.eot?#iefix') format('embedded-opentype'),
       url('https://mojotech-static.s3.amazonaws.com/m4/fonts/altis/altis-medium-webfont.woff2') format('woff2'),
       url('https://mojotech-static.s3.amazonaws.com/m4/fonts/altis/altis-medium-webfont.woff') format('woff'),
       url('https://mojotech-static.s3.amazonaws.com/m4/fonts/altis/altis-medium-webfont.ttf') format('truetype'),
       url('https://mojotech-static.s3.amazonaws.com/m4/fonts/altis/altis-medium-webfont.svg#altismedium') format('svg')
  font-style: normal
  font-weight: normal

html,
body
  font-family: 'AltisMedium'
  height: 100%
  
*
  box-sizing: border-box
  
input
  outline: 0

form
  margin: -40px auto
  position: relative
  top: 50%
  transform: translateY(-50%)
  width: 300px
  
.form-field
  margin: 40px 0
  position: relative
  
  &:before
    background: url('https://mojotech-static.s3.amazonaws.com/m4/blog-post-assets/email.svg')
    content: ""
    height: 16px
    margin-top: -8px
    opacity: 0.5
    position: absolute
    right: 20px
    top: 50%
    transform: translate3d(0,0,0)
    transition: opacity 0.2s ease
    width: 20px
    z-index: 1

.input
  border: 1px solid rgba(#B5CBE6, 0.3)
  padding: 20px
  position: relative
  width: 100%
     
  .example-good &
    border-radius: 6px
    box-shadow: inset 0 1px 2px rgba(black, 0.1), 0 0 0 0 rgba(#279EFD, 0.2)
    color: #8197B2
    padding-right: 60px
    transition: all 0.2s ease
    
    +placeholder()
       color: #B5CBE6
       transition: color 0.2s ease
       
    &:hover
      border-color: rgba(#B5CBE6, 0.6)
     
    &:focus
      border-color: #A8DAFF
      box-shadow: inset 0 0 0 rgba(black, 0.1), 0 0 0 2px rgba(#279EFD, 0.2)
      +placeholder()
         color: rgba(#B5CBE6, 0.5)
         
.example-good.is-focused
  &:before
    opacity: 0.25
  
.example-bad
  &:before
    background: url('https://mojotech-static.s3.amazonaws.com/m4/blog-post-assets/email-gray.svg')
  .input
    border-color: rgba(#9B9B9B, 0.25)
    border-radius: 2px
    
    +placeholder()
       color: #B0B5B5
    
    &:focus
      border-color: #A8DAFF
View Compiled
$(function() {
  $(".input").on('focus blur', function(){
    $(this).parent().toggleClass('is-focused');
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js