@Steve, another reason to disable it is if you want the glow-effect to work in all browsers by using :focus instead of the ill-supported outline style.
– LangdonMar 9 '10 at 16:30

89

It's really annoying when people start a philosophical conversation on whether something is the "right thing to do" when the question is a technical one.
– timMar 22 '13 at 19:31

2

I'm making an online spreadsheet, Steve, so it would be appropriate for my usage. It depends, but if it's just a simple form then you should leave the outline as it is.
– william44ismeAug 12 '13 at 15:02

4

I think it's perfectly ok to disable it and make a custom :focus effect with css...
– ithilOct 30 '13 at 8:07

Also, knowing how to disable something does not mean that it’s irreversible. Anyone who works for any client knows that they might want to see something rendered one way and then switch it back to the original/default way. Lecturing them on accessibility will not change that desire or make anyone happy.
– JakeGouldFeb 12 '18 at 18:27

Perfect, thankyou very much. Also wondering, can I remove the textarea resize option also (at the bottom right of textarea)?
– Alec SmartJun 1 '09 at 16:30

3

+1 for the caution; please try to avoid doing anything which breaks the user's expectation of how their platform performs; you may actually be harming their productivity and making your web site harder to use.
– RobJun 1 '09 at 16:31

6

Remove my chrome/safari textarea resize option at your own peril! I find it really useful, indispensible even on some sites.
– JeeBeeJun 1 '09 at 16:42

This works, for example for <button> elements, which do not particularly benefit from glow-on-focus since mostly you're clicking it anyway.
– kasimirNov 28 '13 at 19:54

1

The accepted answer didn't work for me on Chrome on OSX. This solution did the job.
– BartMay 12 '14 at 7:35

Also using this technique, you can maintain the focus, but redefine the value of the outline to be a solid color of your choice, etc. to fit your site's style if removing it altogether is not completely satisfactory.
– Neil MonroeFeb 3 '15 at 22:20

1

Did not work for me on latest version of chrome 45.0.2454.101 m
– J86Oct 4 '15 at 13:32

This answer from @Carl-W should not be overlooked! - This was useful when using jQuery to link to an anchor that was a div. I was reloading an iframe in the div, then manually going to the anchor without reloading. It would scroll down the page to the anchor, but the whole div had a blue outer glow. Added this CSS on the div element, and it worked! -- NOTE: I didn't use :focus for the selector, I just put the outline-color and outline-style on my div's css.
– WadeSep 1 '17 at 4:09

It's also possible to allow resizing in one direction only, which may fix its interaction with some layouts without disabling it completely: the possible values for resize are none, both, horizontal, vertical, and inherit.
– BoannJul 28 '12 at 6:34

I like the solution offered here with ' -webkit-appearance: none;' - removes ALL of the styling from the input elements, so you can style them as you need to. Thanks!
– hanazairOct 14 '14 at 21:56

I don't know why this has so many upvotes, it's not an answer to the question at all.
– poepjeSep 14 '17 at 17:03

I found it helpful to remove the outline on a "sliding door" type of input button, because the outline doesn't cover the right "cap" of the sliding door image making the focus state look a little wonky.

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).