Scott O'Hara is a UX designer & developer based out of Boston Massachusetts. He loves pushing the limits of CSS, designing for everyone, writing about what he knows & what he's learning and developing wonderful product experiences.
That was kind of the start of it all…
One more thing: To keep things simple, I’m going to provide only the absolute necessary HTML and CSS in the demos. So don’t expect copy and pasting to get the exact results I outline here. However, if you want to see the source code for each example, you can check that out on CodePen and I will provide a link to the source files at the end of the article.
A Simple Form Example
As a pretty straight forward intro, I thought I’d provide another simple form example.
Here we have three text inputs that are using placeholders as their labels. This is really a UX no-no, but I’ve run into many situations where the “designer in charge” has fought tooth-and-nail to block the addition of visible labels.
My solution to get around this ridiculous problem was to provide the labels as “tool tip reminders” when a user focuses in on an input:[code language="html"]
As you can see, nothing too fancy going on with the HTML there. The only thing that’s a little out of the ordinary is that the
<label>comes after the input.
Now here’s the CSS needed to get this working: