How to remove focus border (outline) around text/input boxes? (Chrome)

Question

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using:

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

Text box with blue outline and "Example" written in it

note that oulines also appear in different cases: in IE9 you can see little dots around a button if you select it using tab (ie. you click inside a field before the button & go to the next fields using Tab until you reach the button [going to previous field is Shift + Tab]) — Adrien Be, Feb 11 '13 at 10:32
...And in case someone needs to remove it from select elements in firefox: http://notes.jerzygangi.com/how-to-remove-the-dotted-border-from-around-select-tags-in-firefox/ — Luca Reghellin, Jun 22 '18 at 14:43
Use **border-style: none; background-color: white; font-size: 13px; font-weight: bold; color: black;** — Phoenix, Apr 23 '19 at 12:15
As @Torkil-Johnsen mentioned in a comment below, you might want to give a different style to make it more obvious, but to just remove it is very bad for accessibility (e.g. people who only use a keyboard or other assistive device to tab through elements). — Frank Forte, Nov 07 '19 at 19:53
try this css, it work for me `textarea:focus, input:focus{ border: none; }` — Yosep Tito, Jun 25 '20 at 09:38

score 2671 · Accepted Answer · edited Jan 15 '21 at 22:02

2671

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

textarea:focus, input:focus{
    outline: none;
}

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

⚠️ Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

edited Jan 15 '21 at 22:02

CommonSenseCode

18,848
28
112
163

answered Aug 03 '10 at 13:52

CEich

27,240
1
13
14

37

This is not working for me. I am using Chrome, latest update. I put `input:focus {outline: 0;}` in the CSS, but when I type, the blue Mac outline is still there. – Joe Pigott Nov 05 '13 at 20:29
Problem is when you already use outline. For ex : "outline: .5em solid black !important;". Chrome still does something which reduces the width and it also gets rid of the box-shadow which I'm also using. – Alain Zelink May 02 '14 at 13:54
65

Use `outline: none` – aceofspades Jun 15 '14 at 16:00
5

outline-style: none works well with Chromium (version 34) and Firefox (version 30) – Nantoka Jun 16 '14 at 13:53
64

It's bad for accessibility to remove this outline that is default on :focus. This means that users using the keyboard to navigate will have a hard time seeing which link/item is highlighted when they hit tab. If anything, the highlighting of the element should be enhanced to make it *more* obvious which item has focus. – Torkil Johnsen Jul 25 '14 at 12:46
August 2014 update: Use "outline-style: none" Outline: none did not seem to work. – ProfileTwist Aug 02 '14 at 21:51
43

@TorkilJohnsen, While I agree 100% that the element should be visibly focused the default blue/orange ring behaviour is not always the right strategy. As long as some strategy is adopted (and adopted consistently across a design system) then CSS should be authored to support that decision. – Crispen Smith Jan 27 '15 at 02:47
1

@CrispenSmith: Some form of highlighting or visual cue needs to be present, as pointed out in the original reply. – Torkil Johnsen Feb 05 '15 at 15:14
4

@TorkilJohnsen Yes, I think we agree here. What I disagree with is your statement starts with: t's bad for accessibility to remove this outline that is default on :focus It's bad for every element of UX to have no visual strategy, but it's not specifically bad to remove the default blue border. The Blue/Orange border is a great fallback but shouldn't be considered preferable to a more integrated strategy within a design. – Crispen Smith Feb 06 '15 at 02:22
1

@CrispenSmith I think we agree, yes. I merely meant to underline the point made by the original author :) – Torkil Johnsen Feb 13 '15 at 10:11
No need for the semi colon at the end. – Wessam El Mahdy Apr 09 '16 at 15:45
@Torkil and Crispen - for mobile HTML5 hybrid app, or just mobile sites, the orange box around elements is not desirable generally - and doesn't offer anything at all that I can think of (the user cannot "tab" between divs in that case, and if an input has focus it is because they have just clicked on it). I know this is an old debate - I've just come across this (for me very useful) answer now while tidying up the UI of an app I'm working on. – kris Nov 11 '16 at 23:24
We are using a small grid of textboxes without any space inbetween and you only access the application from an authorized desktop PC. The users are complaining about that blue/orange outline. They insist : the blinking cursor is enough, get rid of that annoying outline !!! – Karl Stephen Mar 29 '18 at 08:27
2

Use `outline: none !important;` – amernov May 29 '18 at 08:51
input, input:focus{ border-width: 0px; outline:0; /* I have also tried outline:none */ -webkit-appearance:none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } – Konstantin XFlash Stratigenas Oct 30 '18 at 11:08
This is outdated. Current browsers use box-shadow. – Lawrence Whiteside May 27 '19 at 18:14
try this css, it work for me `textarea:focus, input:focus{ border: none; }` – Yosep Tito Jun 25 '20 at 09:38
Well, I have tried to remove it by adding outline-color and outline-width, but completely missed to add outline: none as you have mentioned. This worked for me. – Arun Ramachandran Jul 04 '20 at 11:18

score 239 · Answer 2 · edited Apr 19 '20 at 10:37

239

The current answer didn't work for me with Bootstrap 3.1.1. Here's what I had to override:

.form-control:focus {
  border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
}

edited Apr 19 '20 at 10:37

johannchopin

7,327
6
22
62

answered Feb 21 '14 at 03:43

gwintrob

2,685
1
14
14

20

```box-shadow: none;``` did the trick for me. When I put in on the element without ```:focus``` it also removes a very subtle shadow that Chrome puts on border-less and input boxes. – Tim Scott Dec 19 '14 at 04:21
1

This worked for me. For some reason input:focus { outline:none;} did not work. – Brad Ahrens Nov 01 '17 at 20:58
This worked for me. I am using FF latest browser and outline: none is not working. – Naren Verma Jan 03 '18 at 08:10
4

This solution also works for bootstrap v4. – Steve Snow Feb 21 '18 at 02:08
1

On bootstrap 4, if the outline you want to remove is round the hamburger mobile menu, you can just use: – gtamborero Oct 04 '19 at 15:56
box-shadow alone worked for me! Thank you! – I_am_learning_now Dec 13 '19 at 19:28
this worked for me on chrome. outline:none did not – Fakeer Jan 09 '20 at 21:02
Yup, thank you. Great job. – wuzz Sep 06 '20 at 20:50
THANKS! I used it for Bootstrap 4 as others above – testing_22 Jan 04 '21 at 18:50
I even had to put `box-shadow: none!important;` to keep bootstrap from added that border box shadow – matthaeus Apr 08 '21 at 16:09

score 112 · Answer 3 · edited Apr 19 '20 at 10:38

112

input:focus {
    outline:none;
}

This will do. Orange outline won't show up anymore.

edited Apr 19 '20 at 10:38

johannchopin

7,327
6
22
62

answered Aug 03 '10 at 13:52

azram19

1,555
1
8
6

3

Instead of input:focus{ outline: 0; } -> outline:none; Works – BetaCoder Jan 14 '14 at 08:18
20

Don't do it unless you provide some other styling, it's important for accesability. see http://www.outlinenone.com/ – mattumotu Jul 29 '14 at 15:17
1

Actually, this CSS isn't enough. For example, if you're using JQueryUI tabs, the ugly blue border appears after you click on a tab, if you just use your CSS. You do need to add a:focus or li:focus, to prevent the border. – Mike Gledhill Dec 30 '14 at 13:16
this is bad for accessibility and shouldn't be done. – CommonSenseCode Jan 15 '21 at 22:03

Kailas · Answer 4 · 2018-09-03T11:42:00.700

75

<input style="border:none" >

Worked well for me. Wished to have it fixed in html itself ... :)

edited Sep 03 '18 at 11:42

answered Oct 08 '14 at 07:26

Kailas

6,486
3
41
61

5

also works, as well. – Fuzzy Analysis Jan 06 '15 at 04:21
2

you can triple that: input { border: 0 none transparent } – Leo Nov 21 '16 at 21:55
When I add border:none to a css class, its still showing the border for the input field. where as the inline css style="border:none" is working – arun8 Sep 14 '17 at 17:15
1

@arun8 sounds like your CSS selector isn't the highest 'priority' (forgot the word but its like, the importance of your selector e.g p > span.class is more important than just span.class so it will use the code in p > span.class – brandito Apr 04 '18 at 06:37
@arun8 you can try using "!important" in your css class – Kailas Apr 04 '18 at 14:35
work form me too, using bs3 – dewaz Sep 22 '20 at 03:17

score 41 · Answer 5 · answered Aug 03 '10 at 13:51

41

I've found the solution.
I used: outline:none; in the CSS and it seems to have worked. Thanks for the help anyway. :)

answered Aug 03 '10 at 13:51

Joey Morani

21,793
29
79
126

5

That's the focus outline you are removing. It's there for a reason: Usability. Especially keyboard users will hate it if you remove it. – RoToRa Aug 03 '10 at 14:00
28

@RoToRa what if he crafts a better one using shadows CSS 3 ? – ShrekOverflow Feb 17 '12 at 15:09

score 27 · Answer 6 · edited Apr 19 '20 at 10:41

27

this remove orange frame in chrome from all and any element no matter what and where is it

*:focus {
    outline: none;
}

edited Apr 19 '20 at 10:41

johannchopin

7,327
6
22
62

answered Oct 10 '12 at 20:43

nonamehere

313
3
2

score 23 · Answer 7 · edited Apr 19 '20 at 10:41

23

Solution

*:focus {
    outline: 0;
}

PS: Use outline:0 instead of outline:none on focus. It's valid and better practice.

edited Apr 19 '20 at 10:41

johannchopin

7,327
6
22
62

answered May 23 '13 at 09:55

Touhid Rahman

2,279
19
22

1

nope, not working on Chrome – Carl Jul 16 '19 at 08:00
4

How is it better practice? You need to explain why, not just say so. It's definitely not better practice. – Glenn Maynard Jul 25 '20 at 23:52

score 18 · Answer 8 · edited Aug 06 '13 at 21:45

18

Please use the following syntax to remove the border of text box and remove the highlighted border of browser style.

input {
    background-color:transparent;
    border: 0px solid;
    height:30px;
    width:260px;
}
input:focus {
    outline:none;
}

edited Aug 06 '13 at 21:45

daniel__

10,809
14
59
90

answered May 08 '13 at 08:55

Tabish

1,328
15
13

1

Be careful with the transparent definition on the background-color attribute. You don't need that and you probably will have a big problem when you need to write something (you won't find the inputs!). By the way, personally, I would change the transparent background to select a color. For example, if my container has a red color, I would use a white background on the input. – Gilberto Sánchez Dec 28 '16 at 21:07

score 13 · Answer 9 · edited Sep 15 '15 at 14:28

13

Set

input:focus{
    outline: 0 none;
}

"!important" is just in case. That's not necessary. [And now it's gone. –Ed.]

edited Sep 15 '15 at 14:28

Ivanka Todorova

9,092
14
54
91

answered Sep 05 '13 at 15:28

madd

332
2
7

21

Don't use !important unless you REALLY MUST use it. – Mackelito Nov 20 '13 at 09:04
3

@Mackelito You must use !important to work with Bootstrap – Rob Feb 09 '17 at 16:54

score 12 · Answer 10 · edited May 06 '15 at 13:27

12

I found out that you can also use:

input:focus{
   border: transparent;
}

edited May 06 '15 at 13:27

bgilham

5,768
1
21
39

answered May 06 '15 at 12:51

Refilon

2,862
1
20
38

The question may have "border" in the title, but the OP is actually asking about the default outline – zoran404 Dec 14 '20 at 11:32

score 11 · Answer 11 · edited Dec 14 '15 at 00:32

11

This will definitely work. Orange outline will not show anymore.. Common for all tags:

*:focus {
    outline: none;
}

Specific to some tag, ex: input tag

input:focus {
   outline:none;
}

edited Dec 14 '15 at 00:32

hichris123

9,735
15
51
66

answered Apr 19 '13 at 06:51

Prashant Gupta

581
6
10

How to remove focus border (outline) around text/input boxes? (Chrome)

11 Answers11

⚠️ Accessibility warning

Linked

Related