Printable Version of Topic

HTMLHelp Forums _ Cascading Style Sheets _ Border colour with focus in a form field

Posted by: Blueie Dec 3 2017, 04:51 AM

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

Posted by: Christian J Dec 3 2017, 05:12 AM

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.