CSS: dynamic form messages

Another chapter of the series "Look, ma! No JavaScript!". In this post I'm going to show you how to create dynamic messages on forms using only CSS. Basically, CSS actually controls one basic aspect of form elements, namely their ability to get focus. So we can take advantage of this aspect in order to create dynamic messages that will be shown only when an element gets focus. The CSS code required to accomplish this task is incredibly simple and is shown below:

#form ul li span.info {
 float: left;
 font-weight: bold;
 text-transform: uppercase;
 color: #d40;
 display: none;

#form ul li input:focus + span {
 display: block;

When a text field gets focus, the message is shown, and when it loses focus, the message is hidden again. You can see this demo here.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.