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;
}
This question is related to
css
google-chrome
input
focus
border
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;
}
this remove orange frame in chrome from all and any element no matter what and where is it
*:focus {
outline: none;
}
<input style="border:none" >
Worked well for me. Wished to have it fixed in html itself ... :)
Solution
*:focus {
outline: 0;
}
PS: Use outline:0
instead of outline:none
on focus. It's valid and better practice.
Please use the following syntax to remove the border of text box and remove the highlighted border of browser style.
input {
background-color:transparent;
border: 0px solid;
height:30px;
width:260px;
}
input:focus {
outline:none;
}
Set
input:focus{
outline: 0 none;
}
"!important" is just in case. That's not necessary. [And now it's gone. –Ed.]
I've found the solution.
I used: outline:none;
in the CSS and it seems to have worked. Thanks for the help anyway. :)
I found out that you can also use:
input:focus{
border: transparent;
}
input:focus {
outline:none;
}
This will do. Orange outline won't show up anymore.
This will definitely work. Orange outline will not show anymore.. Common for all tags:
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
input:focus {
outline:none;
}
Source: Stackoverflow.com