I have seen that chrome puts a thicker border on :focus
but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?
8 Answers
You should be able to remove it using
outline: none;
but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.
-
8i did change the
background-color
andcolor
properties/attributes (whatever u call it) on:focus
so i guess its still ok May 31, 2010 at 13:09 -
10Yep. Globally setting
outline: none
like some resets do is a mistake as it degrades keyboard accessibility, but it's fine to removeoutline
if you've got another cleart way of reflecting focusedness.– bobinceMay 31, 2010 at 13:23 -
13+1 on the note for this being a VERY bad practice. It would make keyboard usage very annoying. Jul 26, 2012 at 15:39
-
17It's a horrible idea by Chrome, but nice they made it easy to turn off. Of course it's bad practice if you don't do something else to show focus, but who's going to do something that silly? It will look nice on maybe 1% of websites these days, since everyone is doing everything totally custom. Using "standard" looking controls is a thing of the past.– eselkDec 13, 2012 at 20:04
-
1But for a mobile navigation menu based on a
select
dropdown, this is very good practice. Feb 12, 2017 at 9:54
I had to do all of the following to completely remove it:
outline-style: none;
box-shadow: none;
border-color: transparent;
Example:
button {
border-radius: 20px;
padding: 20px;
}
.no-focusborder:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
background-color: black;
color: white;
}
<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>
-
23This should be the top answer, its the only one that completely removes the shadow/border on focus.– Tyguy7Jul 11, 2014 at 22:04
-
6
-
3
-
3
-
3
To remove the default focus, use the following in your default .css file :
:focus {outline:none;}
You can then control the focus border color either individually by element, or in the default .css:
:focus {outline:none;border:1px solid red}
Obviously replace red
with your chosen hex code.
You could also leave the border untouched and control the background color (or image) to highlight the field:
:focus {outline:none;background-color:red}
:-)
This will definitely work. Orange outline won't show up anymore.. Common for all tags:
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
input:focus{
outline:none;
}
The simpliest way is to use something like this but note that it may not be that good.
input {
outline: none;
}
I hope you find this useful.
Problem is when you already have an outline. Chrome still changes something and it's a real pain. I cannot find what to change :
.search input {
outline: .5em solid black;
width:41%;
background-color:white;
border:none;
font-size:1.4em;
padding: 0 0.5em 0 0.5em;
border-radius:3px;
margin:0;
height:2em;
}
.search input:focus, .search input:hover {
outline: .5em solid black !important;
box-shadow:none;
border-color:transparent;;
}
.search button {
border:none;
outline: .5em solid black;
color:white;
font-size:1.4em;
padding: 0 0.9em 0 0.9em;
border-radius: 3px;
margin:0;
height:2em;
background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
background: -webkit-linear-gradient(#4EB4F8, #4198DE);
background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
background: -ms-linear-gradient(#4EB4F8, #4198DE);
background: -o-linear-gradient(#4EB4F8, #4198DE);
background: linear-gradient(#4EB4F8, #4198DE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
zoom: 1;
}
textarea:focus, input:focus{ border: none; }