Text input with CSS transition

I used CSS transitions, a little tiny hack and a bit of CSS to make the search form of justCSS - here's how I did it without Javascript …

The setup for this particular technique requires only an <input type="text"/> and a <label>. The text input needs to be required for the CSS to work - I'll explain why in a second …

First we start with the form basics - we need the form to be positioned relative (I leave the rest of the values, but most are important for styling only, and not for the trick to work) …

Then onto the input itself - we change the border-color as part of the overall transition, but it is not …

Next we want to tackle the label; the label serves as our placeholder here and is absolutely positioned over the text input …

Finally, we use the :focus state of the input and a direct adjacent sibling selector to hide the label when the focus is on the text input, but what happens when we click away? Obviously, the label re-appears … this is why we make the text input required - if we didn't enter text, the label re-appears as it should; if we entered text, the input is :valid and we create another selector to hide the label when the text input is valid …

And here's the final result …

Simple stuff, looks tight and tidy and works in anything except IE9 and lower (no :valid and/or CSS transitions support) … off you go then; copy|paste at will.

A side note:
This is a nice trick for something like a search form, where it is safe to use the required= attribute (or any other field that is genuinely required) - it would be nuts to go and use this for large forms and/or as a replacement for placeholder text … use wisely.