CSS - Removing input field active highlight

Question

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 =)

Grandeur

You do understand this is considered an accessibility feature, right? – Carillon

can someone pls help? =) – Grandeur

Answer 1

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. =)

Circle

Nice! And for anyone wishing to make it more subtle instead of removing it completely, there are also outline-style and outline-color properties. See this answer. – Dynast

Answer 2

See this fiddle.

It seems that you have to set some border property to make outline: none work. If you comment in the border directive, the outline disappears.

Kmeson

Answer 3

input {border:0; outline:none;}

should remove all borders/outlines.

Patch

Like this you wont see the input anymore. – Kmeson

yes, exactly - but is this not what you wanted? :) try border: 1px solid #000; or border: thin inset;. please describe what appearance are you expecting... – Patch

I wanted nothing, but the OP says he wants to get rid of the outline, that is displayed in firefox when the input is focussed. He doesnt say that he wants the border that is visible in all browsers to disappear. But setting a border seems to do the trick on FF, as I said in my answer. Chrome(ium) seems to be satisfied with just outline: none; – Kmeson

Answer 4

The answer is simpler than I reliased:

box-shadow:none;

Nathan

Answer 5

Edit: my solution was way to complicated. It's simple as that:

input:focus {
  outline: none;
}

You need to target the :focus state.

Look

Didn't need to reset before. The code works for me without reseting. Tested on FF, Chrome and Safari and it works fine. – Flypaper

Answer 6

To remove the highlight try adding this rule to the input field(s):

-moz-appearance:none;

This can also be done for WebKit based browsers using the respective prefix:

-webkit-appearance:none;

This should take care of any borders, outline, etc. using just one CSS property. For browsers other than the WebKit pair and Firefox - Opera and IE - it's advisable to include border and outline properties too, ensuring browser cross-compatibility.

Goliard

unfortunately, appearance is not supported by IE and Opera. – Patch

Latest webkit seems to support outline: none properly (tried on chromium just now). @alex-shesterov thats why these properties have -moz or -webkit prefixes. – Kmeson

@alex-shesterov I'll add something about them now. – Goliard

Answer 7

add !important and define the color/background-color in your css file.

#title {
    font-size: 40px;
    color: black !important;
}

Illuminance

Answer 8

This should work for most input types on Firefox:

input::-moz-focus-inner { border: 0; }

Pueblo

OP has asked a solution for any browser and not only for FF – Loquacity

Ah I misread the parenthesis comment in the second paragraph. This fixes the "inner" border, rather than the other outline/outer border. – Pueblo

Answer 9

button {
    -webkit-tap-highlight-color:transparent;
    -moz-tap-highlight-color:transparent;
    -o-tap-highlight-color:transparent;
    tap-highlight-color:transparent;
}

Lippmann