Active Form Fields

Perhaps the most useful interactive feature that you can add to your form fields using CSS is to make the currently active field stand out. The simplest way to do this is to give the currently active form field a different colour border to the rest of the fields.

We can easily identify the currently active form field because it is the one that has the focus. In fact we might more accurately say that the form field that has the focus is the one that will be active whenever a key is pressed (since if we were to style the active state rather than styling focus then the appearance would only change while a key is held down).

Changing the colour of the border can easily be done by making a copy of the CSS used to create the border in the first place, removing all of the styling except the border and then adding :focus to the end of each of the tag identifiers. Then we just substitute an appropriate value for the original border colour - in this example making the border green instead of grey.

input[type=text]:focus, textarea:focus, select:focus {border: 1px solid #080;}

Here is how form fields look when styled with that code added to the code from the prior example - now the border changes colour on the field with the focus:


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow