A Pen by Jankees van Woezik.

CSS-only-sliding-labels.markdown

CSS-only sliding labels

With this css-only solution you only show the 's when necessary, the error state always shows the label.

A Pen by Jankees van Woezik on CodePen.

License.

index.html

<p>
   With this css-only solution you only show the &lsaquo;labels&rsaquo; when necessary, the error state always shows the label.
</p>

<p>
  Please note that the CSS is more complicated that in could be mostly because of the mobile and desktop compatibility. The most important part of this technique is the "input:focus ~ label" Also please note that the label have to be after the input.
</p>

<div class="text-input">
  <input type="text" id="input_1" placeholder="First name">
  <label for="input_2">Please enter your first name</label>
</div>

<div class="text-input">
  <input type="text" id="input_1" placeholder="Last name">
  <label for="input_2">Please enter your last name</label>
</div>
  
<div class="text-input">
  <input type="text" id="input_1" placeholder="Email address" class="error">
  <label for="input_2" class="error">This is no valid email address</label>
</div>

style.sass

@import "bourbon"
@import url(http://fonts.googleapis.com/css?family=Open+Sans)
$font: 'Open Sans', sans-serif
$blue: #57B1E0
$red: #FF0040
$font-color: #3B3B33
  
body
  padding: 10px 30px
  max-width: 400px
  
.text-input
  position: relative
  margin-bottom: 3px
  height: 55px

input[type="text"],
input[type="password"]
  outline: 0
  padding: 12px 0px
  width: 100%
  border: none
  border-bottom: 1px solid #E3E3E3
  color: $font-color
  font-size: 15px
  font-family: $font
  font-weight: normal
  height: 25px
  -webkit-appearance: none
  border-radius: 0
  
  .no-touch &
    @include transition(all, 0.15s)

  &:focus, &.error
    $move: 8px
    padding: (12px + $move) 0px (12px - $move)

  &:focus ~ label, &.error ~ label
    opacity: 1

.text-input label
  font-family: $font
  opacity: 0
  position: absolute
  top: 6px
  left: 0
  color: $blue
  font-size: 10px
  .no-touch &
    @include transition(all, 0.15s)

  &.error
    color: $red