Alex Rivera | Logout

How to reset / remove chrome's input highlighting / focus border?

Asked 2010-05-31T12:37:24.313
438

I have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

image: chrome :focus border

Edit
Report

2 Answers

885

You should be able to remove it using

outline: none;

but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.

answered 2010-05-31T12:41:37.153
25

This will definitely work. Orange outline won't show up anymore.. Common for all tags:

*:focus {
    outline: none;
   }

Specific to some tag, ex: input tag

input:focus{
   outline:none;
  }
answered 2013-04-19T06:29:27.963

Your Answer