Menu
I am trying to remove the small blue border around my submit button which appears when it's pressed. I tried to fix it with border: none; but that didnt fix it.
Currently my code looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="hover.css" />
</head>
<body>
<form id="button1" action="#" method="post">
<input type="submit" value="ORANGE"
class="btn btn-warning"/>
</form>
</body>
</html>
Jsfiddle
I'm using XAMPP to run it on localhost and Google Chrome 42.0.2311.90
UPDATE
.btn:focus {
outline: none;
}
This fixed it for me! I do not not plan on making my site accessible via keyboard so I do not need the blue outline. It's just for looks.
359
To remove focus around the button outline:none property is used. Outline property: Outline is an element property which draws a line around element but outside the border. It does not take space from the width of an element like border.
I think you are looking for something like this:
<style>
.btn:focus {
outline: none;
}
</style>
Add the above styles inside head tag.
By default, bootstrap have outline color blue for focused buttons.
You can remove/update it using class "btn" like mentioned above.
UPDATE
As @MatthewRapati suggested: This outline let's people know that the button has focus and should not be removed. It is an accessibility concern. It is better to restyle it if the default is not wanted
101
Remove the "outline" from the button on click (a:focus)
.btn:focus {
outline: none;
}
Demo :http://jsfiddle.net/baqunkn1/
.btn-warning {
color: #ffffff;
background-color: #ff851b;
border-color: #ff7701;
border: none;
outline:none;
}
Outline are primarily used for accessibility settings, and should be retained for default behavior unless you are providing some mechanism or highlight for focus/accessibility. If you simply remove without providing the same and user uses Keyboard to navigate, he will not be able to know what link/button he is currently on and may ruin the overall experience with your page.
Remove the outline from button
.btn-warning:focus{
outline:0px;
}
You can also remove outline from all the buttons using
input[type=button]:focus,input[type=submit]:focus{
outline:0px;
}
Default button focus has outline of 1px blue on Chrome. There are many more items which have outline, you can disable all of them using:
*{
outline:0px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
