How to remove the border highlight on an input text element

Question

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 a

Answer 1

This is a common concern.

The default outline that browsers render is ugly.

See this for example:

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

  Click to see the input below to see the outline
  

---

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 {
  display: block;
}

  Click on this text and then use the TAB key to naviagte inside the snippet.
  

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 {
  outline: none;
}

  Click on this text and then use the TAB key to naviagte inside the snippet.
  

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 {
  outline: none;
}

  

    Click on this text and then use the TAB key to naviagte inside the snippet.
    
    
    
    
    
    
  

  

    First name:

    
 Last name:

    
  


  

     Male

     Female

     Other
  



  

    Name:
    
  


  

    Name:
    
  


  

    

      
Title
      
      Click me
    
  

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 {
  display: block;
}

  

    Click on this text and then use the TAB key to naviagte inside the snippet.
    
    
    
    
    
    
  

  

    First name:

    
 Last name:

    
  


  

     Male

     Female

     Other
  



  

    Name:
    
  


  

    Name:
    
  


  

    

      
Title
      
      Click me
    
  

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 {
  border-color: transparent;
  border-bottom: 2px solid red
}

  Click to see the input below to see the outline
  

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 {
  border-color: transparent;
  border-bottom: 2px solid red
}

  

    Click on this text and then use the TAB key to naviagte inside the snippet.
    
    
    
    
    
    
  

  

    First name:

    
 Last name:

    
  


  

     Male

     Female

     Other
  



  

    Name:
    
  


  

    Name:
    
  


  

    

      
Title
      
      Click me
    
  

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 {
  color: white !important;
}

  

    
    
    Login