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.