Floating-labels-with-CSS-only.markdown

CSS floating labels

Just an CSS-only experiment that I wanted to share. =) I'm still improving it.

Tested on Google Chrome, Firefox and Opera.

Check out on CodePen.

index.jade

h1 Floating labels with CSS only

h2 ~ default ~
input(id = "email")
label(for = "email") Your e-mail

h2 ~ center ~
input.center(id = "live")
label.center(for = "live") Where do you live?

style.sass

$height: 75px
$color: #2c3e50

input, label
  padding: 30px 30px 10px 30px
input
  /* visual */
  width: 100%
  height: $height
  opacity: 0.5
  background: $color
  box-shadow: ($height / 8) ($height / 8) 0 darken($color, 8%)
  border: 0
  border-radius: $height / 12
  transition: all 700ms ease-in
  &:focus
    $color: #4d346b
    background: $color
    box-shadow: ($height / 8) ($height / 8) 0 darken($color, 8%)
label
  /* on */
  display: inline-block
  position: relative
  top: (-$height)
  left: 0
  /* end state */
  transition: all 300ms ease 9999999s
  /* visual */
  text-transform: uppercase

input:focus + label
  top: (-$height - 13px)
  /* visual */
  font-size: $height / 6
  font-weight: bold
  /* end state */
  transition: all ease 300ms

    

// unnecessary style only
*
  box-sizing: border-box
body, input
  color: #fff
body
  font-family: 'Open Sans'
  background: url(http://i.imgur.com/D3HiN8e.jpg)
  /* center vertically */
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  width: $height * 8
  height: $height * 6
  margin: auto
h1, h2
  font-weight: normal
  text-align: center
h1
  font-weight: bold
  text-transform: uppercase
  margin-bottom: 60px
input.center
  text-align: center
label.center
  width: $height * 8
  text-align: center
h2
  opacity: 0.5
  margin-top: -40px
label
  cursor: text