How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right.

Firefox does not seem to do this, or at least, will let me control it with: 
border: x;

If someone can tell me how IE performs, I would be curious. Getting Safari to remove this little bit of flare would be nice.

5,566 4 4 gold badges 32 32 silver badges 54 54 bronze badges asked Sep 22, 2009 at 2:22 user170579 user170579 8,480 6 6 gold badges 25 25 silver badges 21 21 bronze badges

22 Answers 22

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus

Or in general, to affect all basic form elements:

input:focus, select:focus, textarea:focus, button:focus

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus
5,897 2 2 gold badges 31 31 silver badges 53 53 bronze badges answered Sep 22, 2009 at 3:27 107k 20 20 gold badges 166 166 silver badges 198 198 bronze badges

Thanks Cory, great tip. You also need to assign the CSS to textarea to cover all input fields. input:focus, textarea:focus

Commented Oct 17, 2011 at 2:35 don't forget select as well select:focus Commented Oct 26, 2011 at 18:46

There's also the

Commented Oct 16, 2012 at 1:34

Given the HTML 5 attribute contenteditable, it's worth noting that any editable element will have the outline when it has focus (in many browsers), so div:focus , p:focus or almost any element can also apply here.

Commented Jan 2, 2014 at 4:39

@Cᴏʀʏ would you mind moving the note about a11y and usability to the very top of your question? IMO it would greatly improve your answer since removing a11y features is a bad practice.

Commented Aug 8, 2017 at 14:46

To remove it from all inputs

input
54.6k 28 28 gold badges 141 141 silver badges 149 149 bronze badges answered Mar 23, 2011 at 15:06 1,402 9 9 silver badges 8 8 bronze badges

This was confusing me for some time until I discovered the line was neither a border or an outline, it was a shadow. So to remove it I had to use this:

input:focus, input.form-control:focus
answered Apr 24, 2018 at 8:10 Rikard Askelöf Rikard Askelöf 2,882 4 4 gold badges 22 22 silver badges 24 24 bronze badges Hiding the shadow was absolutely necessary to achieve no border (at least in Chrome 114 on MacOS). Commented Jul 20, 2023 at 23:41

This is an old thread, but for reference it's important to note that disabling an input element's outline is not recommended as it hinders accessibility.

The outline property is there for a reason - providing users with a clear indication of keyboard focus. For further reading and additional sources about this subject see http://outlinenone.com/

answered Dec 30, 2012 at 13:29 20.2k 9 9 gold badges 65 65 silver badges 72 72 bronze badges

Boaz, FYI input.middle will still allow you to traverse through the elements(including input.middle). Pressing the tab key will focus on the input tag as well. Only thing is that you won't be able to see the focus(outline focus) on it. So it's not that harmful to use it.. : )

Commented Jan 31, 2013 at 7:13

@AnishNair Only thing is that you won't be able to see the focus(outline focus) on it - and that's exactly my point. Removing the outline disables the visual indication of the focus event, not the actual event. Removing the visual indication means you're making it harder for people with disabilities who rely on that indication.

Commented Jan 31, 2013 at 9:48 Sometimes we need to compromise, in order to achieve something : ) Commented Jan 31, 2013 at 10:31

@AnishNair True. But more than often people reading this thread would prefer the easy way out (i.e. outline:none; ) without considering the implications. Just because something is easy and saves time, doesn't mean it's best practice :)

Commented Jan 31, 2013 at 10:43

I'm late to the discussion, but you can still style the focused state of the inputs (like changing the border colour or width). As long as you keep accessibility in mind when doing that (good contrast etc), it's just as accessible as the default outlines.

Commented Jul 25, 2014 at 17:42

This is a common concern.

The default outline that browsers render is ugly.

See this for example:

form, label < margin: 1em auto; >label

The most common "fix" that most recommend is outline:none - which if used incorrectly - is disaster for accessibility.

So. of what use is the outline anyway?

There's a very dry-cut website I found which explains everything well.

It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.

Ok, let's try it out same example as above, now use the TAB key to navigate.

form, label < margin: 1em auto; >label

Notice how you can tell where the focus is even without clicking the input?

Now, let's try outline:none on our trusty

So, once again, use the TAB key to navigate after clicking the text and see what happens.

form, label < margin: 1em auto; >label < display: block; >input

See how it's more difficult to figure out where the focus is? The only telling sign is the cursor blinking. My example above is overly simplistic. In real-world situations, you wouldn't have only one element on the page. Something more along the lines of this.

.wrapper < width: 500px; max-width: 100%; margin: 0 auto; >form, label < margin: 1em auto; >label < display: block; >input
 
 
      
 
First name: 
 
Last name: 
  Male 
 Female 
 Other
 
   
Title

Now compare that to the same template if we keep the outline:

.wrapper < width: 500px; max-width: 100%; margin: 0 auto; >form, label < margin: 1em auto; >label
 
 
      
 
First name: 
 
Last name: 
  Male 
 Female 
 Other
 
   
Title

So we have established the following

  1. Outlines are ugly
  2. Removing them makes life more difficult.

So what's the answer?

Remove the ugly outline and add your own visual cues to indicate focus.

Here's a very simple example of what I mean.

I remove the outline and add a bottom border on :focus and :active. I also remove the default borders on the top, left and right sides by setting them to transparent on :focus and :active (personal preference)

form, label < margin: 1em auto; >label < display: block; >input < outline: none >input:focus, input:active

So, we try the approach above with our "real-world" example from earlier:

.wrapper < width: 500px; max-width: 100%; margin: 0 auto; >form, label < margin: 1em auto; >label < display: block; >input < outline: none >input:focus, input:active
 
 
      
 
First name: 
 
Last name: 
  Male 
 Female 
 Other
 
   
Title

This can be extended further by using external libraries that build on the idea of modifying the "outline" as opposed to removing it entirely like Materialize

You can end up with something that is not ugly and works with very little effort

body < background: #444 >.wrapper < padding: 2em; width: 400px; max-width: 100%; text-align: center; margin: 2em auto; border: 1px solid #555 >button, .wrapper < border-radius: 3px; >button < padding: .25em 1em; >input, label
answered Aug 24, 2017 at 11:45 I haz kode I haz kode 1,615 3 3 gold badges 21 21 silver badges 39 39 bronze badges

The only solution that worked for me

The border is actually a shadow. So to hide it I had to do this:

input[type="text"]:focus < box-shadow: 0 0 0 rgb(255, 255, 255); >input[type="checkbox"]:focus
answered Feb 18, 2020 at 21:25 1,739 8 8 gold badges 41 41 silver badges 70 70 bronze badges

Removing all focus styles is bad for accessibility and keyboard users in general. But outlines are ugly and providing a custom focussed style for every single interactive element can be a real pain.

So the best compromise I've found is to show the outline styles only when we detect that the user is using the keyboard to navigate. Basically, if the user presses TAB, we show the outlines and if he uses the mouse, we hide them.

It does not stop you from writing custom focus styles for some elements but at least it provides a good default.

This is how I do it:

// detect keyboard users const keyboardUserCssClass = "keyboardUser"; function setIsKeyboardUser(isKeyboard) < const < body >= document; if (isKeyboard) < body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass); >else < body.classList.remove(keyboardUserCssClass); >> // This is a quick hack to activate focus styles only when the user is // navigating with TAB key. This is the best compromise we've found to // keep nice design without sacrifying accessibility. document.addEventListener("keydown", e => < if (e.key === "Tab") < setIsKeyboardUser(true); >>); document.addEventListener("click", e => < // Pressing ENTER on buttons triggers a click event with coordinates to 0 setIsKeyboardUser(!e.screenX && !e.screenY); >); document.addEventListener("mousedown", e => < setIsKeyboardUser(false); >);
body:not(.keyboardUser) *:focus
By default, you'll see no outline. But press TAB key and you'll see focussed element
  This is anchor link