CSSPLAY

CSS DEMOS › A CSS only version of form input prompts

Date : 1st March 2014

For all modern browsers

Information

No doubt you have all seen form fields which contain prompts for the required inputs, and the prompts are removed when you enter the inputs. Also the prompts return if you leave the input without entering any text.

In all the forms that I have seen this is done using jQuery/javascript. So I thought that it might be interesting if this were done using just CSS. So I have produced the demo form above.

If you click on any label or input the input prompts will be removed so that you can enter text. If you enter your text then click another field the promt for the entered field will not return. However, if you go back into the same field and delete your text then leave this field the prompt will be displayed.

As an added bonus the prompt text can be a different color to the input text.

All done with just CSS and works in all the latest browsers.

March 2015 - With the latest CSS placeholder and pattern style this will soon be redundant.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.