How to remove the border highlight on an input text element

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 {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

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{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

:focus-visible

Good news for accessibility - Chrome & Firefox added support for :focus-visible.

Hiding focus styles is bad practice due to accessibility requirements (keyboard navigation) which makes your websites less accessible.

Use :focus-visible pseudo-class and let the browser to determinate when to apply focus.

:focus-visible /* Chrome */

Note that Firefox supports similar functionality through an older, prefixed pseudo-class:

:-moz-focusring /* Firefox */

button {
  color: #000;
  background-color: #fff;
  padding: 10px 16px;
  margin: 10px 0;
  border-radius: 4px;
}

button:focus {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
}

button:hover {
  background-color: #eee;
}

button.with-focus-visible:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}

button.with-focus-visible:focus-visible, 
button.with-focus-visible:moz-focusring {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
}

<p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>without :focus-visible</button>
<button class="with-focus-visible">with :focus-visible</button>

docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

w3 specifications: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo

In Bootstrap 4 to remove border outline you can use shadow-none, it will remove focus outline.

            <div class="form-group">
                <label for="exampleInputEmail1">Name</label>
                <input type="text" class="form-control form-control shadow-none" 
                id="exampleInputEmail1"aria-describedby="emailHelp">
            </div>

The textarea on focus may have box-shadow.. It can be removed like so:

textarea:focus{
    outline: none!important;
    box-shadow: none!important;
}

None of the solutions worked for me in Firefox.

The following solution changes the border style on focus for Firefox and sets the outline to none for other browsers.

I've effectively made the focus border go from a 3px blue glow to a border style that matches the text area border. Here's some border styles:

Dashed border (border 2px dashed red):

No border! (border 0px):

Textarea border (border 1px solid gray):

Here is the code:

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

try this css, it work for me

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

Try this:

*:focus {
    outline: none;
}

This would affect all your pages.

In case the above solutions din't work, you might be using the bootstrap and therefore the .form-control class is applying box-shadow css property to your input field by default.

The solution will be:

.form-control {
    box-shadow: none;
}