How to remove focus border (outline) around text/input boxes? (Chrome)
Solution 1
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
Solution 2
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;
}
Solution 3
input:focus {
outline:none;
}
This will do. Orange outline won't show up anymore.
Solution 4
<input style="border:none" >
Worked well for me. Wished to have it fixed in html itself ... :)
Solution 5
I've found the solution.
I used: outline:none;
in the CSS and it seems to have worked. Thanks for the help anyway. :)
Joey Morani
Updated on January 16, 2021Comments
-
Joey Morani over 3 years
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; }
-
Adrien Be about 11 yearsnote 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])
-
Luca Reghellin almost 6 years...And in case someone needs to remove it from select elements in firefox: notes.jerzygangi.com/…
-
Phoenix about 5 yearsUse border-style: none; background-color: white; font-size: 13px; font-weight: bold; color: black;
-
Frank Forte over 4 yearsAs @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).
-
Yosep Tito almost 4 yearstry this css, it work for me
textarea:focus, input:focus{ border: none; }
-
-
RoToRa over 13 yearsThat'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 about 12 years@RoToRa what if he crafts a better one using shadows CSS 3 ?
-
Joe Pigott over 10 yearsThis 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. -
Mackelito over 10 yearsDon't use !important unless you REALLY MUST use it.
-
BetaCoder over 10 yearsInstead of input:focus{ outline: 0; } -> outline:none; Works
-
Alain Zelink about 10 yearsProblem 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 almost 10 yearsUse
outline: none
-
Nantoka almost 10 yearsoutline-style: none works well with Chromium (version 34) and Firefox (version 30)
-
Torkil Johnsen almost 10 yearsIt'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.
-
mattumotu almost 10 yearsDon't do it unless you provide some other styling, it's important for accesability. see outlinenone.com
-
UserInteractive over 9 years
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. -
Mike Gledhill over 9 yearsActually, 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.
-
Fuzzy Analysis over 9 years<input style="border:0px" > also works, as well.
-
Crispen Smith over 9 years@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.
-
Leo over 7 yearsyou can triple that: input { border: 0 none transparent }
-
Gilberto Sánchez over 7 yearsBe 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.
-
Rob about 7 years@Mackelito You must use !important to work with Bootstrap
-
arun8 over 6 yearsWhen 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
-
Brad Ahrens over 6 yearsThis worked for me. For some reason input:focus { outline:none;} did not work.
-
Naren Verma over 6 yearsThis worked for me. I am using FF latest browser and outline: none is not working.
-
Steve Snow about 6 yearsThis solution also works for bootstrap v4.
-
brandito about 6 years@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 about 6 years@arun8 you can try using "!important" in your css class
-
Carl almost 5 yearsnope, not working on Chrome
-
gtamborero over 4 yearsOn bootstrap 4, if the outline you want to remove is round the hamburger mobile menu, you can just use: <button class="navbar-toggler" style="outline:none;" ...>
-
I_am_learning_now over 4 yearsbox-shadow alone worked for me! Thank you!
-
Fakeer over 4 yearsthis worked for me on chrome. outline:none did not
-
Glenn Maynard almost 4 yearsHow is it better practice? You need to explain why, not just say so. It's definitely not better practice.
-
zoran404 over 3 yearsThe question may have "border" in the title, but the OP is actually asking about the default outline
-
CommonSenseCode over 3 yearsthis is bad for accessibility and shouldn't be done.
-
matthaeus about 3 yearsI even had to put
box-shadow: none!important;
to keep bootstrap from added that border box shadow -
Jacob over 2 years@brandito the word you're looking for is "specificity"
-
Renato about 2 yearsThis answer promotes creating inaccessible solution which prevents a lot of people from using important applications. Even with the "accessibility warning" at the bottom, most people would not bother to read it below. This answer needs to be hidden or heavily modified so that at the top is an accessible solution and below with a big warning with working like "Previous Answer: Do not use it!" the inaccessible solution.