Remove Safari/Chrome textinput/textarea glow

Question

I am wondering if its possible to remove the default blue and yellow glow when I click on a text input / text area using CSS?

Solution 1

Edit (11 years later): Don't do this unless you're going to provide a fallback to indicate which element is active. Otherwise, this harms accessibility as it essentially removes the indication showing which element in a document has focus. Imagine being a keyboard user and not really knowing what element you can interact with. Let accessibility trump aesthetics here.

textarea, select, input, button { outline: none; }

Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.

You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Solution 2

This effect can occur on non-input elements, too. I've found the following works as a more general solution

:focus {
  outline-color: transparent;
  outline-style: none;
}

---

Update: You may not have to use the :focus selector. If you have an element, say <div id="mydiv">stuff</div>, and you were getting the outer glow on this div element, just apply like normal:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Solution 3

On textarea resizing in webkit based browsers:

Setting max-height and max-width on the textarea will not remove the visual resize handle. Try:

resize: none;

(and yes I agree with "try to avoid doing anything which breaks the user's expectation", but sometimes it does make sense, i.e. in the context of a web application)

To customize the look and feel of webkit form elements from scratch:

-webkit-appearance: none;

Solution 4

I experienced this on a div that had a click event and after 20 some searches I found this snippet that saved my day.

-webkit-tap-highlight-color: rgba(0,0,0,0);

This disables the default button highlighting in webkit mobile browsers

Solution 5

Carl W:

This effect can occur on non-input elements, too. I've found the following works as a more general solution

:focus {
  outline-color: transparent;
  outline-style: none;
}

I’ll explain this:

• :focus means it styles the elements that are in focus. So we are styling the elements in focus.
• outline-color: transparent; means that the blue glow is transparent.
• outline-style: none; does the same thing.

View more solutions

Comments

[Alec Smart]

Perfect, thankyou very much. Also wondering, can I remove the textarea resize option also (at the bottom right of textarea)?

[Rob]

+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.

[Tyler Rash]

Yes, set the max-height and max-width.

[marcgg]

and @ajm, thanks! I didn't know that, I thought it was here to stay with no way to fix it.

[JeeBee]

Remove my chrome/safari textarea resize option at your own peril! I find it really useful, indispensible even on some sites.

[Alec Smart]

Am not removing the resize option, but thought it would be good to know just in case :)

[Liam]

Very interesting, this outline CSS rule seems to be very under-used.

[Admin]

this is not a valid for css2.1 is there any other way ?

[Daniel]

for getting rid of the resize handle: resize: none;

[Boann]

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.

[Cory Mawhorter]

This doesn't completely work in chrome (textarea). You need to set box-shadow:none; as well... this is getting to be a nightmare.

[kasimir]

This works, for example for <button> elements, which do not particularly benefit from glow-on-focus since mostly you're clicking it anyway.

[Bart]

The accepted answer didn't work for me on Chrome on OSX. This solution did the job.

[hanazair]

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!

[homerjam]

Thanks. .btn:active:focus was necessary to remove the glow whilst actually holding down the button.

[Micah]

This is a great solution for experienced web devs, just make sure you are implementing another way to clearly see which element is currently in focus.

[Neil Monroe]

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.

[TKoL]

I use this on clicked buttons, but I have to put !important for it to work in my node-webkit (chromium-based) app. button { outline: none !important; }

[mz2]

I had to also set border:none; box-shadow:none in my case to the affected text area.

[J86]

None of the above worked for me. Using Chrome version 45.0.2454.101 m

[J86]

Did not work for me on latest version of chrome 45.0.2454.101 m

[Wade]

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.

[paddotk]

I don't know why this has so many upvotes, it's not an answer to the question at all.

[Haje]

You missed the 'select' textarea, input, button, select { outline: none; }