The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Border colour with focus in a form field, Changing the border colour
Blueie
post Dec 3 2017, 04:51 AM
Post #1





Group: Members
Posts: 3
Joined: 15-September 13
Member No.: 19,734



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 3 2017, 05:12 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,736
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
3 User(s) are reading this topic (3 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 12th December 2017 - 08:22 PM