When I click somewhere else the border disappears, I tried to use onfocus: none, but that didn't help. How to make this ugly button border disappear when I click on it?
input[type=button] {
width: 120px;
height: 60px;
margin-left: 35px;
display: block;
background-color: gray;
color: white;
border: none;
}
<input type="button" value="Example Button">
Using outline: none; you can remove that border in chrome.
<style>
input[type=button] {
width: 120px;
height: 60px;
margin-left: 35px;
display: block;
background-color: gray;
color: white;
border: none;
outline: none;
}
</style>
Focus outline in Chrome and FF:
removed button focus outline:
button,
input[type=button] {
outline: none;
}
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner {
border: 0;
}
/*
Accessibility (A11Y)
Don't forget! User accessibility is important
*/
button:focus,
input[type=button]:focus {
/* your custom focused styles here */
}
It works for me simply :)
*:focus {
outline: 0 !important;
}
This one worked for me
button:focus {
border: none;
outline: none;
}
Set both the outline and the box-shadow properties of the button to none and make them important.
input[type=button] {
outline: none !important;
box-shadow: none !important;
}
The reason for setting the values to **important** is that, if you are using other CSS libraries or frameworks like Bootstrap, it might get overridden.
The outline property is what you need. It's shorthand for setting each of the following properties in a single declaration:
outline-style
outline-width
outline-color
You could use outline: none;, which is suggested in the accepted answer. You could also be more specific if you wanted:
button {
outline-style: none;
}
button:focus{outline:none !important;}
add !important if it is used in Bootstrap
To avoid the problem caused when you change the outline property on a focus, is to give a visual effect when the user Tab on the input button or click on it.
In this case is a submit type, but you can apply to a type="button" too.
input[type=submit]:focus {
outline: none !important;
background-color: rgb(208, 192, 74);
}
Given the html below:
<button class="btn-without-border"> Submit </button>
In the css style do the following:
.btn-without-border:focus {
border: none;
outline: none;
}
This code will remove button border and will disable button border focus when the button is clicked.
As many others have mentioned, selector:focus {outline: none;} will remove that border but that border is a key accessibility feature that allows for keyboard users to find the button and shouldn't be removed.
Since your concern seems to be an aesthetic one, you should know that you can change the color, style, and width of the outline, making it fit into your site styling better.
selector:focus {
outline-width: 1px;
outline-style: dashed;
outline-color: red;
}
Shorthand:
selector:focus {
outline: 1px dashed red;
}
It's greatly simple than you think. When the button is focussed, apply the outline property, like this:
button:focus {
outline: 0 !important;
}
But when I use none value, it doesn't work for me.
Removing nessorry accessible event not a good idea in up to standard web developments.
either way if you looking for a solution removing just the outline doesn't solve the problem. you also have to remove the blue color shadow. for specific scenarios use a separate class name to isolate the this special style to your button.
.btn.focus, .btn:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
Better do this
.remove-border.focus, .remove-border:focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}
Removing the outline is an accessibility nightmare. People tabbing using keyboards will never know what item they're on.
Best to leave it, as most clicked buttons will take you somewhere anyway, or if you HAVE to remove the outline then isolate it a specific class name.
.no-outline {
outline: none;
}
Then you can apply that class whenever you need to.
Another alternative to restore outline when using the keyboard is to use :focus-visible. However, this doesn't work on IE :https://caniuse.com/?search=focus-visible.
It's also good note that outline: none can be applied to both <button> tags and input[type=button] to remove the browser-applied border on click.
Since Chrome and Mozilla added this line not only around buttons but also around linked text, I use on my site this:
a:focus {outline: none;
}
Works for both browsers, links, and buttons.
Btw, this did not (27.4.2021):
input[type=button]{
outline:none;
}
input[type=button]::-moz-focus-inner {
border: 0;
}
I'm using materializecss for my project but I have a problem.
I have disabled the outline of the inputs but the inputs still showing up a weird outline on focus.
This is the css for the inputs
.inputs input[type=text]:focus {
border: 1px solid #FFFFFF!important;
background-color: #FAFAFA!important;
box-shadow: none!important;
outline:none!important;
}
This is likely the :active pseudo class as it seems like the border is changing when you click.
Try making a rule that changes both the focus and active pseudo classes.
.inputs input[type=text]:active,
.inputs input[type=text]:focus {
border: 1px solid #FFFFFF!important;
background-color: #FAFAFA!important;
box-shadow: none!important;
outline:none!important;
}
I don't see a question here, but I am assuming you want to get rid of the outline altogether?
If you provide more details I'll be able to give more accurate answer, but first thing that comes to mind from looking at provided gif is that maybe that outline comes from an :active state.
You can remove outline for both states on the bare element and see if that has some impact:
input:focus,
input:active {
outline: none;
}
If this didn't solve your problem, please give some more input (pun intended :)) and we'll figure it out.
Best,
N.
P.S. Upon further inspection, it seems to me that when you click, the border is set. That's also why your input fields move a little bit (can you see that)? Please update your code. This should be trivial.
I would like to remove the blue outline it gives me when my radio is clicked/focused.
I tried using outline: none and border: none, but nothing seems to be working.
Does anyone have a solution for this?
Screenshot of what I’m talking about:
Remove the outline when the input element has the focus.
input:focus{
outline:none;
}
As a side note, this is only for Google Chrome, other browsers use different techniques for showing an input element has the focus.
UPDATE:
Having worked a lot with accessibility lately, I've come to understand that removing the outline from inputs is not a very good thing. It prevents people using keyboard navigation to see what's focused.
ORG POST:
You might have to be more specific with your selector. When using bootstrap you have to override it (in my version, 3.3.6 at least) by selecting input[type="radio"]:focus, not just input:focus, like this:
input[type="radio"]:focus {
outline: none;
}
Maybe a separate issue, but I had to set box-shadow to none as well.
input[type="checkbox"] {
outline: none;
box-shadow: none;
}
I know this is old, but hope that it helps somebody!
input[type='radio']:focus {
outline: none !important;
box-shadow: none !important;
}
/*For Bootstrap*/
.custom-control-input:focus ~ .custom-control-label::before {
box-shadow: none !important;
}
Try This
input[type="radio"]:focus {
outline: none;
box-shadow: none;
}
Try this:
input[type=radio] {
outline-color: transparent;
}
Hope it helps!
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 7 years ago.
There are other things on SO regarding this, but none of the solutions seem to work.
I'm trying to get rid of the light blue border that Google Chrome puts around any input box. My code:
#alphatxt:focus {
border: 0;
outline:none;
}
It works on buttons but doesn't on any input field
It still doesn't remove the border, I've tried multiple different techniques that have been recommended but still no joy.
Can this be done?
Thanks
You can try this it will work
#alphatxt:focus {
outline: none; // removes blue outline on focus
border: 0; // removes border
box-shadow: none; // removes shadow (for bootstrap etc )
}
Try doing
input:focus,
#alphatxt:focus {
outline: 0;
}
However I wouldn't recommend removing it as the outline is used for people who don't have a mouse so they can use 'tab' and also the visually impaired.
http://www.outlinenone.com/
You need to override the outline property, a browser default:
https://jsfiddle.net/hv8s8ygn/
input:focus {
outline: none;
}
Put below css in you css file
input[type="text"]:focus, textarea:focus
{
border: none !important;
outline: 0 none;
}
Okay, I'm trying to get rid of all these little things browsers do to input fields (like focus borders and what not).
input[type="text"] {
font:bold 10px/12px verdana,arial,serif;
padding: 20px;
border-radius: 15px;
}
input[type="text"]:focus {
outline: none!important;
}
The code above does not work. I also tried editing the input via the 2.1 way (
input.text { /*stuffhere*/};
input.text:focus{ outline: none; }
). It didn't work. Anybody have any ideas?
I'm at a loss; you seem to be doing it correctly. Border for the normally-visible border, and outline for the focusy thing.
Have a look at this fiddle and see if it's working as expected. If it does (as it does for me), it could be conflicting CSS in your case. !important is a dangerous and powerful tool, but it's still no guarantee.
http://jsfiddle.net/LQppm/1/
input[type="text"] {border: none}
input[type="text"]:focus {outline: none}
maybe outline: 0!important; will work?