Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting rid of the blue focus rectangle on input boxes in HTML/CSS?

Tags:

html

css

macos

I'm running Mac OS so I can't really tell if this effect is presented on windows machines or not, so I apologize if this effect is not seen for you.

Input and TextFields seem to have a blue rectangle when focused, atleast on Firefox and Chrome on a Mac. I have a custom focus effect on a site, and I'm wondering if I can avoid having this default selection behavior show. Google avoids it on their site. I went as far as to get the 'in-effect' CSS style for Google's input box, apply that to my css object. However, it still shows the blue rectangle. I'm not exactly sure what kind of voodoo google is doing, but it seems to me that it's neither HTML or CSS attributes. Anyone know how to avoid this effect? Thanks!

like image 350
Kalen Avatar asked Sep 07 '10 16:09

Kalen


People also ask

How do you turn off input focus in CSS?

To remove or disable focus border of browser with CSS, we select the styles for the :focus pseudo-class. to set the outline style to none to remove the border of the element that's in focus.


1 Answers

It is in fact a CSS attribute. This will hide that glowing effect:

input:focus, textarea:focus {     outline: none; } 
like image 113
BoltClock Avatar answered Sep 29 '22 06:09

BoltClock