Help - Search - Members - Calendar
Full Version: Border colour with focus in a form field
HTMLHelp Forums > Web Authoring > Cascading Style Sheets

Is it possible, please, to change the border colour only (not the background) of an input field on a Web form where that field has 'focus'? In other words, if the user is typing in his name, the border of the field he is typing in is in one colour while the other fields retain their original colour. Then, when the user moves on to the email field, that field also changes it's colour, because it has focus while the name field reverts back to its original colour.

Many thanks

Christian J
You can use the :focus pseudo-class:

input[type=text]:focus {border: solid red;}

I also use the [type=text] attribute selector, so that only INPUT text fields are affected (and not e.g. submit buttons).

Some browsers (Chrome?) may add an outline around focused form fields in addition to the border, that can probably be removed with the "outline" property set to 0.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.