By Joey Morani


2010-08-03 13:49:03 8 Comments

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;
}

enter image description here

11 comments

@Kailas 2014-10-08 07:26:44

<input style="border:none" >

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

@Fuzzy Analysis 2015-01-06 04:21:16

<input style="border:0px" > also works, as well.

@Leo 2016-11-21 21:55:41

you can triple that: input { border: 0 none transparent }

@arun8 2017-09-14 17:15:42

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

@Brandito 2018-04-04 06:37:04

@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

@Kailas 2018-04-04 14:35:30

@arun8 you can try using "!important" in your css class

@Touhid Rahman 2013-05-23 09:55:13

Solution

*:focus {
    outline: 0;
}

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

@Carl 2019-07-16 08:00:18

nope, not working on Chrome

@CEich 2010-08-03 13:52:36

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, 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;
}

@Joe Pigott 2013-11-05 20:29:35

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.

@Alain Zelink 2014-05-02 13:54:21

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.

@aceofspades 2014-06-15 16:00:29

Use outline: none

@Nantoka 2014-06-16 13:53:50

outline-style: none works well with Chromium (version 34) and Firefox (version 30)

@Torkil Johnsen 2014-07-25 12:46:58

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.

@ProfileTwist 2014-08-02 21:51:32

August 2014 update: Use "outline-style: none" Outline: none did not seem to work.

@Crispen Smith 2015-01-27 02:47:02

@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.

@Torkil Johnsen 2015-02-05 15:14:32

@CrispenSmith: Some form of highlighting or visual cue needs to be present, as pointed out in the original reply.

@Crispen Smith 2015-02-06 02:22:30

@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.

@Torkil Johnsen 2015-02-13 10:11:31

@CrispenSmith I think we agree, yes. I merely meant to underline the point made by the original author :)

@Wessam El Mahdy 2016-04-09 15:45:05

No need for the semi colon at the end.

@kris 2016-11-11 23:24:17

@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.

@Karl Stephen 2018-03-29 08:27:49

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 !!!

@amernov 2018-05-29 08:51:21

Use outline: none !important;

@Konstantin XFlash Stratigenas 2018-10-30 11:08:04

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; }

@Lawrence Whiteside 2019-05-27 18:14:52

This is outdated. Current browsers use box-shadow.

@Prashant Gupta 2013-04-19 06:51:47

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;
}

@azram19 2010-08-03 13:52:33

input:focus {
    outline:none;
}

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

@BetaCoder 2014-01-14 08:18:06

Instead of input:focus{ outline: 0; } -> outline:none; Works

@mattumotu 2014-07-29 15:17:22

Don't do it unless you provide some other styling, it's important for accesability. see outlinenone.com

@Mike Gledhill 2014-12-30 13:16:24

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.

@madd 2013-09-05 15:28:33

Set

input:focus{
    outline: 0 none;
}

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

@Mackelito 2013-11-20 09:04:46

Don't use !important unless you REALLY MUST use it.

@Rob 2017-02-09 16:54:52

@Mackelito You must use !important to work with Bootstrap

@Refilon 2015-05-06 12:51:24

I found out that you can also use:

input:focus{
   border: transparent;
}

@gwintrob 2014-02-21 03:43:55

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;
}

@Tim Scott 2014-12-19 04:21:33

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.

@AlmostPitt 2017-11-01 20:58:11

This worked for me. For some reason input:focus { outline:none;} did not work.

@Narendra Verma 2018-01-03 08:10:14

This worked for me. I am using FF latest browser and outline: none is not working.

@Steve Snow 2018-02-21 02:08:47

This solution also works for bootstrap v4.

@Nicholas Humphrey 2019-03-15 21:05:00

Thanks, finally something works for me!

@Tabish 2013-05-08 08:55:15

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;
}

@Gilberto Sánchez 2016-12-28 21:07:02

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.

@nonamehere 2012-10-10 20:43:34

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

*:focus {
    outline: none;
}

@Joey Morani 2010-08-03 13:51:37

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

@RoToRa 2010-08-03 14:00:29

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.

@ShrekOverflow 2012-02-17 15:09:34

@RoToRa what if he crafts a better one using shadows CSS 3 ?

Related Questions

Sponsored Content

37 Answered Questions

[SOLVED] Removing input background colour for Chrome autocomplete?

21 Answered Questions

[SOLVED] Remove blue border from css custom-styled button in Chrome

  • 2013-12-02 23:45:23
  • eshellborn
  • 687195 View
  • 701 Score
  • 21 Answer
  • Tags:   css google-chrome

6 Answered Questions

14 Answered Questions

[SOLVED] How to remove the border highlight on an input text element

12 Answered Questions

[SOLVED] How do I get the value of text input field using JavaScript?

  • 2012-07-19 15:00:28
  • user979331
  • 1977522 View
  • 771 Score
  • 12 Answer
  • Tags:   javascript dom input

7 Answered Questions

[SOLVED] remove inner shadow of text input

  • 2012-10-09 01:22:22
  • FabianCook
  • 127852 View
  • 61 Score
  • 7 Answer
  • Tags:   html css css3 input

8 Answered Questions

[SOLVED] How to reset / remove chrome's input highlighting / focus border?

2 Answered Questions

[SOLVED] CSS position:fixed is working for the header but not for the footer

  • 2015-12-01 06:56:01
  • Deepak
  • 1040 View
  • 4 Score
  • 2 Answer
  • Tags:   css asp.net html5

0 Answered Questions

1 Answered Questions

[SOLVED] Remove Focus Outline from Input type="range" in Firefox

Sponsored Content