Advertisement
Advertisement


How to remove focus border (outline) around text/input boxes? (Chrome)


Question

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;
}

Text box with blue outline and "Example" written in it

2020/04/19
1
1359
4/19/2020 10:35:24 AM

Accepted Answer

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, 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;
}
2020/04/19
2423
4/19/2020 10:37:00 AM

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;
}
2020/04/19

input:focus {
    outline:none;
}

This will do. Orange outline won't show up anymore.

2020/04/19

<input style="border:none" >

Worked well for me. Wished to have it fixed in html itself ... :)

2018/09/03

I've found the solution.
I used: outline:none; in the CSS and it seems to have worked. Thanks for the help anyway. :)

2010/08/03

this remove orange frame in chrome from all and any element no matter what and where is it

*:focus {
    outline: none;
}
2020/04/19

Source: https://stackoverflow.com/questions/3397113
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]