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

css google-chrome focus border
Jiew Meng picture Jiew Meng · May 31, 2010 · Viewed 433.6k times · Source

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

Answer

Pekka picture Pekka · May 31, 2010

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.

Related questions

How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Remove blue border from css custom-styled button in Chrome

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an …

Read More