CSS - Removing input field active highlight

css input-field
Kizer Yakuza picture Kizer Yakuza · Mar 16, 2013 · Viewed 52.4k times · Source

Using only html and css, how do I disable the blue (in Firefox) highlight color around an active input field. I've tried using input {outline:none;} but with no success. Thanks for the help! =)

ok,ignoring the previous code about outline, I chose the wrong property to change. What I'm trying to get is to simply remove the highlighting (whatever browser, its the bold and colored border that appears) around an active form input field, without changing or disabling the styling. Thanks =)

Answer

Paula Fleck picture Paula Fleck · Jul 17, 2014

You have to use :focus declaration. In this case:

input:focus {outline:none;}

All the input's in your project won't have the blue border.

If you want a specific attribute, use this:

input[type=text]:focus {outline:none;}

Hope it helps. =)

Related questions

How to display file name for custom styled input file using jquery?

I have styled a file input using CSS: Everything is working fine, but I’d like to display the selected file name. How is this possible using CSS or jQuery?

Read More
CSS: remove all padding from cell with input field

I have a table row with an input field in each cell that is used to filter a column. How can I remove all padding from the td's in this row so that there is no extra space between the …

Read More
Why do my HTML form elements move around when clicking on them in IE8?

I have an HTML form with a bunch of input fields (of type text and select). I am floating them such that there are two on each row. In all browsers (including IE7), everything works okay, but for some reason …

Read More