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

You do understand this is considered an accessibility feature, right? — cimmanon, Mar 16 '13 at 19:42

Paula Fleck · Answer 1 · 2014-09-16T18:23:53.613

32

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

edited Sep 16 '14 at 18:23

answered Jul 17 '14 at 13:53

Paula Fleck

835
11
21

score 17 · Answer 2 · answered Mar 16 '13 at 19:17

17

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.

answered Mar 16 '13 at 19:17

ohcibi

2,518
3
24
47

score 10 · Answer 3 · answered Mar 16 '13 at 19:20

10

input {border:0; outline:none;}

should remove all borders/outlines.

answered Mar 16 '13 at 19:20

Alex Shesterov

26,085
12
82
103

Like this you wont see the input anymore. – ohcibi Mar 16 '13 at 19:20
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... – Alex Shesterov Mar 16 '13 at 19:28
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; – ohcibi Mar 16 '13 at 19:29

score 8 · Answer 4 · answered Sep 26 '13 at 21:22

8

The answer is simpler than I reliased:

box-shadow:none;

answered Sep 26 '13 at 21:22

Jason Slade

89
1
3

Azragh · Answer 5 · 2018-05-03T08:12:07.303

2

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

input:focus {
  outline: none;
}

You need to target the :focus state.

edited May 03 '18 at 08:12

answered Jun 29 '16 at 14:40

Azragh

59
5

Didn't need to reset before. The code works for me without reseting. Tested on FF, Chrome and Safari and it works fine. – Jay Smoke Nov 29 '16 at 13:51

Blieque · Answer 6 · 2013-03-16T19:28:16.637

0

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.

edited Mar 16 '13 at 19:28

answered Mar 16 '13 at 19:19

Blieque

670
7
28

unfortunately, appearance is not supported by IE and Opera. – Alex Shesterov Mar 16 '13 at 19:23
Latest webkit seems to support outline: none properly (tried on chromium just now). @alex-shesterov thats why these properties have -moz or -webkit prefixes. – ohcibi Mar 16 '13 at 19:25
@alex-shesterov I'll add something about them now. – Blieque Mar 16 '13 at 19:26

score 0 · Answer 7 · answered Oct 18 '19 at 05:06

0

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

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

answered Oct 18 '19 at 05:06

Smilez

113
7

score -1 · Answer 8 · answered Sep 23 '14 at 16:00

-1

This should work for most input types on Firefox:

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

answered Sep 23 '14 at 16:00

Mark

1,564
1
14
22

OP has asked a solution for any browser and not only for FF – Amit Singh Sep 23 '14 at 16:10
Ah I misread the parenthesis comment in the second paragraph. This fixes the "inner" border, rather than the other outline/outer border. – Mark Sep 23 '14 at 19:36

score -1 · Answer 9 · answered Nov 19 '18 at 08:08

-1

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

answered Nov 19 '18 at 08:08

quas

333
4
12

CSS - Removing input field active highlight

9 Answers9