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 am working on  this is distracting and does not look right    lt input type  text  name  user  class  middle  id  user  tabindex  1    gt    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

User · Answer

Update 2020 -   focus-visible Good news for accessibility - Chrome  amp  Firefox just 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      x000D   x000D  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    x000D   lt p gt Click on the button using a mouse  Then try tabbing to the button  lt  p gt   lt button gt without  focus-visible lt  button gt   lt button class  with-focus-visible  gt with  focus-visible lt  button gt  x000D   x000D   x000D   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

User · Answer

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

User · Answer

In your case  try   input middle focus       outline-width  0      Or in general  to affect all basic form elements   input focus  select focus  textarea focus  button focus       outline  none        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       outline  none      Although I wouldn t recommend it  for completeness  sake  you could always disable the focus outline on everything with this     focus       outline  none      Keep in mind that the focus outline is an accessibility and usability feature  it clues the user into what element is currently focused

User · Answer

Remove the outline when focus is on element, using below CSS property:

input:focus {
    outline: 0;
}

This CSS property removes the outline for all input fields on focus or use pseudo class to remove outline of element using below CSS property.

.className input:focus {
    outline: 0;
}

This property removes the outline for selected element.

User · Answer

You could use CSS to disable that  This is the code I use for disabling the blue border    focus       outline  none     This is a working example

User · Answer

Try this    focus       outline  none     This would affect all your pages

User · Answer

You can remove the orange or blue border  outline  around text input boxes by using  outline none  input       background-color  transparent      border  0px solid      height  20px      width  160px      color   CCC      outline none  important

User · Answer

Use this code   input focus       outline  0

User · Answer

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

User · Answer

You can try this also  input type  text     outline-style  none      or   classname input  outline-style  none

User · Answer

The only solutiion that worked with me The border is actually a shadow  So to hide it I had to do this  input type  quot text quot   focus       box-shadow  0 0 0 rgb 255  255  255       input type  quot checkbox quot   focus        box-shadow  0 0 0 rgb 255  255  255

User · Answer

In Bootstrap 4 to remove border outline you can use shadow-none  it will remove focus outline                lt div class  form-group  gt                   lt label for  exampleInputEmail1  gt Name lt  label gt                   lt input type  text  class  form-control form-control shadow-none                   id  exampleInputEmail1 aria-describedby  emailHelp  gt               lt  div gt

User · Answer

This is a common concern   The default outline that browsers render is ugly   See this for example    x000D   x000D  form  x000D  label   x000D    margin  1em auto  x000D    x000D   x000D  label   x000D    display  block  x000D    x000D   lt form gt  x000D     lt label gt Click to see the input below to see the outline lt  label gt  x000D     lt input type  text  placeholder  placeholder text    gt  x000D   lt  form gt  x000D   x000D   x000D      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     x000D   x000D  form  x000D  label   x000D    margin  1em auto  x000D    x000D   x000D  label   x000D    display  block  x000D    x000D   lt form gt  x000D     lt label gt Click on this text and then use the TAB key to naviagte inside the snippet  lt  label gt  x000D     lt input type  text  placeholder  placeholder text    gt  x000D   lt  form gt  x000D   x000D   x000D    Notice how you can tell where the focus is even without clicking the input    Now  let s try outline none on our trusty  lt input gt   So  once again  use the TAB key to navigate after clicking the text and see what happens    x000D   x000D  form  x000D  label   x000D    margin  1em auto  x000D    x000D   x000D  label   x000D    display  block  x000D    x000D   x000D  input   x000D    outline  none  x000D    x000D   lt form gt  x000D     lt label gt Click on this text and then use the TAB key to naviagte inside the snippet  lt  label gt  x000D     lt input type  text  placeholder  placeholder text    gt  x000D   lt  form gt  x000D   x000D   x000D    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     x000D   x000D   wrapper   x000D    width  500px  x000D    max-width  100   x000D    margin  0 auto  x000D    x000D   x000D  form  x000D  label   x000D    margin  1em auto  x000D    x000D   x000D  label   x000D    display  block  x000D    x000D   x000D  input   x000D    outline  none  x000D    x000D   lt div class  wrapper  gt  x000D   x000D     lt form gt  x000D       lt label gt Click on this text and then use the TAB key to naviagte inside the snippet  lt  label gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D     lt  form gt  x000D   x000D     lt form gt  x000D      First name  lt br gt  x000D       lt input type  text  name  firstname  gt  lt br gt  Last name  lt br gt  x000D       lt input type  text  name  lastname  gt  x000D     lt  form gt  x000D   x000D   x000D     lt form gt  x000D       lt input type  radio  name  gender  value  male  checked gt  Male lt br gt  x000D       lt input type  radio  name  gender  value  female  gt  Female lt br gt  x000D       lt input type  radio  name  gender  value  other  gt  Other x000D     lt  form gt  x000D   x000D   x000D   x000D     lt form gt  x000D       lt label for  GET-name  gt Name  lt  label gt  x000D       lt input id  GET-name  type  text  name  name  gt  x000D     lt  form gt  x000D   x000D   x000D     lt form gt  x000D       lt label for  POST-name  gt Name  lt  label gt  x000D       lt input id  POST-name  type  text  name  name  gt  x000D     lt  form gt  x000D   x000D   x000D     lt form gt  x000D       lt fieldset gt  x000D         lt legend gt Title lt  legend gt  x000D         lt input type  radio  name  radio  id  radio  gt  x000D         lt label for  radio  gt Click me lt  label gt  x000D       lt  fieldset gt  x000D     lt  form gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    Now compare that to the same template if we keep the outline    x000D   x000D   wrapper   x000D    width  500px  x000D    max-width  100   x000D    margin  0 auto  x000D    x000D   x000D  form  x000D  label   x000D    margin  1em auto  x000D    x000D   x000D  label   x000D    display  block  x000D    x000D   lt div class  wrapper  gt  x000D   x000D     lt form gt  x000D       lt label gt Click on this text and then use the TAB key to naviagte inside the snippet  lt  label gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D     lt  form gt  x000D   x000D     lt form gt  x000D      First name  lt br gt  x000D       lt input type  text  name  firstname  gt  lt br gt  Last name  lt br gt  x000D       lt input type  text  name  lastname  gt  x000D     lt  form gt  x000D   x000D   x000D     lt form gt  x000D       lt input type  radio  name  gender  value  male  checked gt  Male lt br gt  x000D       lt input type  radio  name  gender  value  female  gt  Female lt br gt  x000D       lt input type  radio  name  gender  value  other  gt  Other x000D     lt  form gt  x000D   x000D   x000D   x000D     lt form gt  x000D       lt label for  GET-name  gt Name  lt  label gt  x000D       lt input id  GET-name  type  text  name  name  gt  x000D     lt  form gt  x000D   x000D   x000D     lt form gt  x000D       lt label for  POST-name  gt Name  lt  label gt  x000D       lt input id  POST-name  type  text  name  name  gt  x000D     lt  form gt  x000D   x000D   x000D     lt form gt  x000D       lt fieldset gt  x000D         lt legend gt Title lt  legend gt  x000D         lt input type  radio  name  radio  id  radio  gt  x000D         lt label for  radio  gt Click me lt  label gt  x000D       lt  fieldset gt  x000D     lt  form gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    So we have established the following    Outlines are ugly 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    x000D   x000D  form  x000D  label   x000D    margin  1em auto  x000D    x000D   x000D  label   x000D    display  block  x000D    x000D   x000D  input   x000D    outline  none x000D    x000D   x000D  input focus  x000D  input active   x000D    border-color  transparent  x000D    border-bottom  2px solid red x000D    x000D   lt form gt  x000D     lt label gt Click to see the input below to see the outline lt  label gt  x000D     lt input type  text  placeholder  placeholder text    gt  x000D   lt  form gt  x000D   x000D   x000D    So  we try the approach above with our  real-world  example from earlier    x000D   x000D   wrapper   x000D    width  500px  x000D    max-width  100   x000D    margin  0 auto  x000D    x000D   x000D  form  x000D  label   x000D    margin  1em auto  x000D    x000D   x000D  label   x000D    display  block  x000D    x000D   x000D  input   x000D    outline  none x000D    x000D   x000D  input focus  x000D  input active   x000D    border-color  transparent  x000D    border-bottom  2px solid red x000D    x000D   lt div class  wrapper  gt  x000D   x000D     lt form gt  x000D       lt label gt Click on this text and then use the TAB key to naviagte inside the snippet  lt  label gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D       lt input type  text  placeholder  placeholder text    gt  x000D     lt  form gt  x000D   x000D     lt form gt  x000D      First name  lt br gt  x000D       lt input type  text  name  firstname  gt  lt br gt  Last name  lt br gt  x000D       lt input type  text  name  lastname  gt  x000D     lt  form gt  x000D   x000D   x000D     lt form gt  x000D       lt input type  radio  name  gender  value  male  checked gt  Male lt br gt  x000D       lt input type  radio  name  gender  value  female  gt  Female lt br gt  x000D       lt input type  radio  name  gender  value  other  gt  Other x000D     lt  form gt  x000D   x000D   x000D   x000D     lt form gt  x000D       lt label for  GET-name  gt Name  lt  label gt  x000D       lt input id  GET-name  type  text  name  name  gt  x000D     lt  form gt  x000D   x000D   x000D     lt form gt  x000D       lt label for  POST-name  gt Name  lt  label gt  x000D       lt input id  POST-name  type  text  name  name  gt  x000D     lt  form gt  x000D   x000D   x000D     lt form gt  x000D       lt fieldset gt  x000D         lt legend gt Title lt  legend gt  x000D         lt input type  radio  name  radio  id  radio  gt  x000D         lt label for  radio  gt Click me lt  label gt  x000D       lt  fieldset gt  x000D     lt  form gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    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   x000D   x000D  body   x000D    background   444 x000D    x000D   x000D   wrapper   x000D    padding  2em  x000D    width  400px  x000D    max-width  100   x000D    text-align  center  x000D    margin  2em auto  x000D    border  1px solid  555 x000D    x000D   x000D  button  x000D   wrapper   x000D    border-radius  3px  x000D    x000D   x000D  button   x000D    padding   25em 1em  x000D    x000D   x000D  input  x000D  label   x000D    color  white  important  x000D    x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs materialize 0 100 1 css materialize min css    gt  x000D   x000D   lt div class  wrapper  gt  x000D     lt form gt  x000D       lt input type  text  placeholder  Enter Username  name  uname  required gt  x000D       lt input type  password  placeholder  Enter Password  name  psw  required gt  x000D       lt button type  submit  gt Login lt  button gt  x000D     lt  form gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I tried all the answers and I still couldn t get mine to work on Mobile  until I found -webkit-tap-highlight-color   So  what worked for me is         -webkit-tap-highlight-color  transparent

User · Answer

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:

_x000D_

// detect keyboard users_x000D_
_x000D_
const keyboardUserCssClass = "keyboardUser";_x000D_
_x000D_
function setIsKeyboardUser(isKeyboard) {_x000D_
  const { body } = document;_x000D_
  if (isKeyboard) {_x000D_
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);_x000D_
  } else {_x000D_
   body.classList.remove(keyboardUserCssClass);_x000D_
  }_x000D_
}_x000D_
_x000D_
// This is a quick hack to activate focus styles only when the user is_x000D_
// navigating with TAB key. This is the best compromise we've found to_x000D_
// keep nice design without sacrifying accessibility._x000D_
document.addEventListener("keydown", e => {_x000D_
  if (e.key === "Tab") {_x000D_
   setIsKeyboardUser(true);_x000D_
  }_x000D_
});_x000D_
document.addEventListener("click", e => {_x000D_
  // Pressing ENTER on buttons triggers a click event with coordinates to 0_x000D_
  setIsKeyboardUser(!e.screenX && !e.screenY);_x000D_
});_x000D_
_x000D_
document.addEventListener("mousedown", e => {_x000D_
  setIsKeyboardUser(false);_x000D_
});

_x000D_

body:not(.keyboardUser) *:focus {_x000D_
  outline: none;_x000D_
}

_x000D_

<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>_x000D_
<button>This is a button</button>_x000D_
<a href="#">This is anchor link</a>_x000D_
<input type="checkbox" />_x000D_
<textarea>textarea</textarea>_x000D_
<select/>

_x000D_

User · Answer

try this css  it work for me textarea focus  input focus  border  none

User · Answer

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:

_x000D_

input:focus, textarea:focus {_x000D_
    outline: none; /** For Safari, etc **/_x000D_
    border:1px solid gray; /** For Firefox **/_x000D_
}_x000D_
_x000D_
#textarea  {_x000D_
  position:absolute;_x000D_
  top:10px;_x000D_
  left:10px;_x000D_
  right:10px;_x000D_
  width:calc(100% - 20px);_x000D_
  height:160px;_x000D_
  display:inline-block;_x000D_
  margin-top:-0.2em;_x000D_
}

_x000D_

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

_x000D_

User · Answer

To remove it from all inputs  input    outline none

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

The answer is

Update 2020 - `:focus-visible`

This is a common concern.

So...of what use is the outline anyway?

So what's the answer?

Examples related to css

Examples related to input

Examples related to safari

Examples related to webkit

Examples related to border

Tags

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

The answer is

Update 2020 - :focus-visible

This is a common concern.

So...of what use is the outline anyway?

So what's the answer?

Examples related to css

Examples related to input

Examples related to safari

Examples related to webkit

Examples related to border

Tags

Update 2020 - `:focus-visible`