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

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

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

CODE
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-2024 Invision Power Services, Inc.