%form.form{action: ''}
    %label.label.required{for: 'name'} Full name
    %input.text-input#name{type: 'text', name: 'name', required: true, value: 'Use Tab'}
    %label.label{for: 'email'} E-mail
    %input.text-input#email{type: 'email', name: 'email', required: true}
    %label.label{for: 'phone'} Phone
    %input.text-input#phone{type: 'phone', name: 'phone'}
    %label.label{for: 'login'} Login
    %input.text-input#login{type: 'text', name: 'login', required: true, value: 'mican'}
    -# %span.message Already taken
    %label.label{for: 'password'} Password
    %input.text-input#password{type: 'password', name: 'password', required: true}
    %label.label Sport?
      - %w(Football Basketball Volleyball Golf Swimming).each_with_index do |item,i|
          %input.checkbox-input{name: 'choice', type: 'checkbox', value: i, id: "choice-#{i}"}/
          %label.checkbox-label{:for => "choice-#{i}"}= item
    %label.label Favourite JS framework
      - %w(React Vue Angular Riot Polymer Ember Meteor Knockout).each_with_index do |item,i|
          %input.option-input{name: 'option', type: 'radio', value: i, id: "option-#{i}"}/
          %label.option-label{:for => "option-#{i}"}= item
    %label.label{for: "about"} About
    %textarea.textarea#about{cols: 50, name: "about", rows: 4}
    %label.label{for: "select"} Position
      %option{value: '', selected: true}
      %option{value: "ceo"} CEO
      %option{value: "front-end"} Front-end developer
      %option{value: "back-end"} Back-end developer
    %input.button{type: "submit", value: "Send"}
View Compiled
// colors

$bg: #111111
$vibrant: #E8474C

$text: white
$label: white

$border: transparent
$static: #222222
$focus: #4E4E4E
$active: white
$inactive: #4E4E4E
$error: #E8474C

  -webkit-font-smoothing: antialiased

  background-color: $bg
  font-family: 'Titillium Web', sans-serif
  @media screen and (min-width: 40em)
    font-size: 1.25em

  padding: .75em 1em
  appearance: none
  outline: none
  line-height: normal
  border-radius: 0
  border: none
  background: none
  display: block
  @extend %block
  font-weight: bold
  color: $label
    top: 0
    left: 0
  letter-spacing: .025em
  font-size: 1.125em
  line-height: 1.25
  position: relative
  z-index: 100
  .required &:after
    content: '\0020*'
    color: $error
    font-weight: normal
    font-size: .75em
    vertical-align: top
=stripes($color1: #555, $color2: transparent, $angle: 0deg, $stripe1-width: 25px, $stripe2-width: null)
  @if $stripe2-width == null
    $stripe2-width: $stripe1-width

  $tile-size: ($stripe1-width + $stripe2-width) * 2
  $stripe2-start: $stripe1-width / $tile-size * 100%
  $stripe3-start: $stripe2-start + $stripe2-width / $tile-size * 100%
  $stripe4-start: $stripe3-start + $stripe1-width / $tile-size * 100%

  background-size: $tile-size $tile-size
  background-image: linear-gradient($angle, $color1, $color1 $stripe2-start, $color2 $stripe2-start, $color2 $stripe3-start, $color1 $stripe3-start, $color1 $stripe4-start, $color2 $stripe4-start, $color2)
  background-repeat: repeat
  @extend %block
  font: inherit
  line-height: normal
  width: 100%
  box-sizing: border-box
  background: $static
  color: white
  position: relative
    color: $label

    box-shadow: 0 0 0px 1000px $bg inset
    -webkit-text-fill-color: white
    border-top-color: $bg
    border-left-color: $bg
    border-right-color: $bg

  &.required, &[required]
    &.error, .error &
      +stripes(rgba($vibrant,.5), transparent, 135deg, 2px, 2px)

  &:active, &:focus
    @extend %input-active
  .form:not(.has-magic-focus) &
    background: $focus
  @extend %block
  // color: red
  position: absolute
  bottom: 0
  right: 0
  z-index: 100
  font-size: .625em
  color: $label
  border: 0
  clip: rect(0 0 0 0)
  height: 1px
  margin: -1px
  overflow: hidden
  padding: 0
  position: absolute
  width: 1px

  + label
    @extend %input
    display: inline-block
    width: auto
    color: $inactive
    position: relative
    user-select: none
    cursor: pointer
  &:focus, &:active
    + label
      color: $focus
    + label
      color: $active
    // &:focus, &:active
    //   + label:before
    //     box-shadow: inset 0px 0px 0px .5em $focus
    //     color: $active

  + label
    // &:before
    //   border-radius: 50%
    // &:after
    //   top: 1px
    //   left: 1px
    //   width: 1em
    //   height: 1em
    //   box-sizing: border-box
    //   border: 3px solid $bg
    //   border-radius: 50%
    //   transform: none

  @extend %block
  font: inherit
  // font-size: 1em
  line-height: normal
  cursor: pointer

  background: $vibrant
  color: white
  font-weight: bold
  width: auto
  margin-left: auto
  font-weight: bold
    left: 2em
    right: 2em

  &:hover, &:focus, &:active
    color: white
    border-color: white

    position: relative
    top: 1px
    left: 1px

  padding: 2em
  max-width: 40em
  margin: 0 auto
  position: relative
  display: flex
  flex-flow: row wrap
  justify-content: space-between
  align-items: flex-end
    width: 100%
    margin: 0 0 1.5em 0
      @media screen and (min-width: 40em)
        width: calc(50% - 1px)
      margin-left: auto

    @extend %input

    @extend %input
    max-width: 100%
    @extend %button
    @extend %label
    @extend %error
    @extend %input
    text-indent: 0.01px
    text-overflow: ""!important
      display: none
  .checkboxes, .options
    padding: 0
    margin: 0
    list-style-type: none
    overflow: hidden
  .checkbox, .option
    float: left
    margin: 1px
    @extend %checkbox
    @extend %checkbox
    // @extend %option
  @extend %input
  pointer-events: none
    content: ''
    pointer-events: none
    width: .5em
    height: .5em
    border-style: solid
    border-color: $label
    border-width: 0 3px 3px 0
    position: absolute
    top: 50%
    margin-top: -.625em
    right: 1em
    transform-origin: 0 0
    transform: rotate(45deg)


    @extend %input-active
      border-color: white

  position: absolute
  z-index: 0
  width: 0
  // height: 0
  pointer-events: none
  background: rgba(white,.15)
  transition: top .2s, left .2s, width .2s

  backface-visibility: hidden
  transform-style: preserve-3d
  will-change: top, left, width
  transform-origin: 0 0
View Compiled
        class magicFocus
  constructor: (@parent) ->
    return unless @parent
    @focus = document.createElement 'div'
    @focus.classList.add 'magic-focus'
    @parent.classList.add 'has-magic-focus'
    @parent.appendChild @focus

    for input in @parent.querySelectorAll('input, textarea, select')      
      input.addEventListener 'focus', ->
      input.addEventListener 'blur', ->
  show: =>
    return unless ['INPUT','SELECT','TEXTAREA'].includes? (el = document.activeElement).nodeName
    el = document.querySelector("[for=#{el.id}]") if ['checkbox', 'radio'].includes? el.type

    @focus.style.top = "#{el.offsetTop||0}px"
    @focus.style.left = "#{el.offsetLeft||0}px"
    @focus.style.width = "#{el.offsetWidth||0}px"
    @focus.style.height = "#{el.offsetHeight||0}px"
  hide: =>
    @focus.style.width = 0 unless ['INPUT','SELECT','TEXTAREA', 'LABEL'].includes? (el = document.activeElement).nodeName
    @reset = setTimeout ->
    , 200

# initialize
window.magicFocus = new magicFocus document.querySelector('.form')

$ ->
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Titillium+Web:400,700

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery.customSelect/0.5.1/jquery.customSelect.min.js
  3. https://codepen.io/mican/pen/XgRmNr.js