Thank you. Your comment will be posted following moderation.
Please complete the form to post your comment.
{ a resource for web designers & developers }
RSS feed Twitter Flickr YouTube
24 comments

Create a fancy web form with field hints using only CSS3

CSS3 tricks have been pretty popular in the last while on various design blogs and with good reason. Like many of you, I've caught the CSS3 bug and this afternoon I took a stab at this nifty little method of adding hints to your form fields (as well as some fancy style enhancements) using CSS3. The cool part is you don't require Javascript for the form field hints. Here's a demo and run down of the code used.

Known Issues

The effect does not work when you tab through the form. It would also be better to show the hints on focus instead of on hover, which would resolve the usability issue but I've had some problems in getting the other method to work across browsers. I might stick at it and see.

In the end, this is just an experiment and I do not recommend using this method in practice.

The XHTML markup:

<form id="myForm" method="post" action="#">
<fieldset>

<!-- EACH LABEL AND FORM ELEMENT IS WRAPPED IN ITS OWN DIV TO APPLY THE HOVER STYLE THAT DISPLAYS THE HIDDEN HINT -->
<div class="myName">
<label>My name:</label>
<!-- HINT IS HIDDEN BY DEFAULT -->
<p class="hint">Please include both your first & last name</p>
<input type="text" name="Name" class="textfield" />
</div>

<div class="myEmail">
<label>My email address:</label>
<p class="hint">Your email address will never be sold!</p>
<input type="text" name="EmailAddress" class="textfield" />
</div>

<!-- IT IS PROBABLY UNNECESSARY TO USE A HINT FOR A SELECT LIST SO IT'S OMITTED HERE -->
<label>I'm looking for:</label>
<select class="dropdown" name="Topic">
<option>Select...</option>
<option>A CSS3 form like this</option>
<option>A CSS3 form like this</option>
<option>A CSS3 form like this</option>
</select>

<div class="myComments">
<label>Comments:</label>
<p class="hint">Please be as specific as possible so we can serve you quickly</p>
<textarea cols="60" rows="10" class="textarea"></textarea>
</div>

<!-- A HINT ON A SUBMIT BUTTON IS PROBABLY OVERKILL BUT THIS IS JUST TO SHOW THAT IT CAN BE DONE -->
<div class="sendTip">
<p class="hint">Make sure your info is correct before sending!</p>
<input type="submit" name="Submit" value="Send message" class="btn" />
</div>

</fieldset>
</form>

The CSS:

fieldset {
  width: 450px;
  margin: 0;
  padding: 30px;
  background: #f0f0f0;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; 
  -moz-box-shadow: 6px 6px 6px #ddd;
  -webkit-box-shadow: 6px 6px 6px #ddd;
  box-shadow: 6px 6px 6px #ddd;
}

label {
  display: block;
  font: bold 1.2em arial,verdana,tahoma,sans-serif;
  text-shadow: 2px 2px 2px #ccc;
  color: #000;
  margin: 0 20px 10px 0;
  padding: 0;
  clear: left;
}

/* APPLIES THE STYLE TO EACH FORM ELEMENT */

.textfield, .dropdown, .textarea {
  width: 220px;
  font: normal 1.1em arial,verdana,tahoma,sans-serif;
  color: #666;
  margin: 0 0 30px 0;
  padding: 9px 14px;
  background: #f2f2f2;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;  
  -moz-box-shadow: 4px 4px 4px #ddd;
  -webkit-box-shadow: 4px 4px 4px #ddd;
  box-shadow: 4px 4px 4px #ddd;
}

/* OPTIONAL SET WIDTH FOR THE SELECT LIST */

.dropdown {
  width: 250px;
}

/* OPTIONAL SET WIDTH FOR THE TEXTAREA */

.textarea {
  width: 410px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; 
}

/* CHANGE THE STYLE WHEN THE FORM ELEMENT IS CLICKED */

input:focus, select:focus, .textarea:focus {
  background: #fff;
  border: 2px solid #ddd;
  -moz-box-shadow: 2px 1px 1px #ddd;
  -webkit-box-shadow: 2px 1px 1px #ddd;
  box-shadow: 2px 1px 1px #ddd;
  outline: none;
}

/* THE NAMES FOR EACH OF THE FORM ELEMENT DIVS WHICH AUTOMATICALLY HIDES THE TIPS BY DEFAULT */

div.myName p.hint, div.myEmail p.hint, div.myComments p.hint, div.sendTip p.hint {
  display: none;
}  

/* WHEN EACH DIV IS HOVERED, THE TIP IS DISPLAYED */

div.myName:hover > p.hint, div.myEmail:hover > p.hint, div.myComments:hover > p.hint, div.sendTip:hover > p.hint  {
  position: absolute;
  display: block;
  font: bold 0.8em arial,verdana,tahoma,sans-serif;
  text-shadow: none;
  color: #000;
  margin: 0 0 0 265px;
  padding: 10px 15px;
  background: #ffff80;
  border: 2px solid #f7de35;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;   
  -moz-box-shadow: 4px 4px 4px #ddd;
  -webkit-box-shadow: 4px 4px 4px #ddd;
  box-shadow: 4px 4px 4px #ddd;  
}

/* CHANGES THE LEFT MARGIN ON THE TEXTAREA TIP, FOR BALANCE */

div.myComments:hover > p.hint {
  margin: 2px 0 0 350px;
}

/* CHANGES THE LEFT MARGIN ON THE SUBMIT BUTTON TIP, FOR BALANCE */

div.sendTip:hover > p.hint {
  margin: 2px 0 0 150px;
}

.btn {
  display: block;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  color: #000;
  text-decoration: none;
  margin: 0;
  padding: 9px 11px 8px 11px;
  background: #f2f2f2 url(../img/submit-backgr.png) repeat-x;
  border: 2px solid #d0d0d0;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;  
  -moz-box-shadow: 4px 4px 4px #ddd;
  -webkit-box-shadow: 4px 4px 4px #ddd;
  box-shadow: 4px 4px 4px #ddd;  
}

.btn:hover, .btn:focus {
  color: #fff;
  background: #f2f2f2 url(../img/submit-hover-backgr.png) repeat-x; 
  border: 2px solid #888;
  -moz-box-shadow: 2px 2px 2px #ddd;
  -webkit-box-shadow: 2px 2px 2px #ddd;
  box-shadow: 2px 2px 2px #ddd;  
}

Stay well.

Share this post:

Related articles:





Set Phasers on Fun!

Skyrocket Labs is a resource for beginner to advanced web designers & developers, offering original jQuery scripts & design tools, insight into best practices and industry trends and, more importantly, dedicated to celebrating and exchanging with the vast and amazing talent in the designer/developer community. It's about learning, sharing, growing and having a blast.

In the Community

CSS Globe Speckyboy Usability Post Peter Hinton Design Blue Awesome AEXT Smashing Magazine Six Revisions Janko at Warp Speed