Display Your Labels

When you create a form in a website, this one should have some fields with associated labels but with placeholders many developers (or designers) “forgot” to add labels. Most of the time it is because it’s not really pretty and placeholders already give all needed informations. Why not but there is some accessibility problems when you don’t put your labels.

Try to understand what is a field already filled with Walker (homage to Paul Walker who just die today). Is it a name or a surname ?

So I wanted to develop a different way to display your labels to have your informations but without so much “pollution” in your design.

Here is the solution, display the label only when the user focus (or/and hover) on the field. And of course I didn’t wanted to use javascript and I wanted at least a fallback for old browsers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.field {
  position:relative;
  label {
    position: absolute;
    top: 0;
  }
  input {
    margin-top: 20px;
    &:focus, &:hover {
      + label {
        visibility: visible;
      }
    }
    + label {
      visibility: hidden;
    }
  }
}
1
2
3
4
<div class="field">
  <input placeholder="Name">
  <label>Name</label>
</div>

This is really basic but it does the work, and if your browser doesn’t support css3 + selector, your label will just be displayed.

Now we can just add some animations to have something more “modern”.

See the Pen vjdGB by Anthony (@antho1404) on CodePen

I was inspired by this.

Comments

Copyright © 2014 - Anthony Estebe -