Bootstrap button - remove outline on Chrome OS X
Google ChromeButtonFocusTwitter Bootstrap-3OutlineGoogle Chrome Problem Overview
I am looking to achieve this: http://getbootstrap.com/javascript/#popovers-examples - scroll to the "live Demo" and hit the red popover button, in Chrome on OS X.... It's perfect beautiful
Now go here (the problem child): http://yoyo.io/javascript/#popovers - it outlines blue, aaaargh.
If you inspect you will see a litany of CSS efforts from me to remove this! It looks correct in Safari and Firefox but a no go in Chrome!
Anyone - what am I overlooking??
Many thanks in advance!
Google Chrome Solutions
Solution 1 - Google Chrome
I see .btn:focus
has an outline
on it:
.btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
Try changing this to:
.btn:focus {
outline: none !important;
}
Basically, look for any instances of outline
on :focus
ed elements — that's what's causing it.
Update - For Bootstrap v4:
.btn:focus {
box-shadow: none;
}
Solution 2 - Google Chrome
For any googlers like me, where..
.btn:focus {
outline: none;
}
still didn't work in Google Chrome, the following should completely remove any button glow.
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
outline: none;
}
Solution 3 - Google Chrome
.btn:focus, .btn:active:focus, .btn.active:focus{
outline:none;
box-shadow:none;
}
This should remove outline and box shadow
Solution 4 - Google Chrome
In bootstrap 4 the outline is no longer used, but the box-shadow. If it is your case, just do the following:
.btn:focus {
box-shadow: none;
}
Solution 5 - Google Chrome
With scss:
$btn-focus-box-shadow: none!important;
Solution 6 - Google Chrome
.btn.active
or .btn.focus
alone cannot override Bootstrap's styles. For default theme:
.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus {
outline: none;
}
Solution 7 - Google Chrome
The simplest solution is: Create a CSS file and type this:
.btn:focus, .btn:active:focus, .btn.active:focus {
box-shadow: none !important;
}
Solution 8 - Google Chrome
This will remove it - short and clean:
.btn {
outline: none !important;
}
Solution 9 - Google Chrome
Here's the solution:
#sec-one{padding: 15px 0;}
p{text-align: center;}
/*
* Change the color to any color you want;
* or set to none if you don't any outline at all.
*/
*:focus:not(a){
outline: 2px solid #f90d0e !important;
box-shadow: none !important;
}
<!doctype html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<section id="sec-one">
<div class="container">
<div class="row">
<div class="col">
<form>
<fieldset class="form-group">
<input type="text" class="form-control" placeholder="Full Name" required>
</fieldset>
<fieldset class="form-group">
<input type="email" class="form-control" placeholder="Email Address" required>
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-default" value="Sign Up">
</fieldset>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
This works 100% hope it helps you.
Solution 10 - Google Chrome
Search and replace
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
Replace to
outline: 0;
Solution 11 - Google Chrome
If the above answers still do not work, add this:
button:focus{
outline: none!important;
box-shadow:none;
}
Solution 12 - Google Chrome
It worked for my bootstrap button after a such stress
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
outline: none!important;
box-shadow: none;
}
Solution 13 - Google Chrome
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
button.btn:focus,
button.btn:active,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
box-shadow: inset 0 -1px 0 #ddd;
outline: none !important;
}
Solution 14 - Google Chrome
you can put this tag into your html.
<button class='btn btn-primary' onfocus='this.blur'>
Button Text
</button>
I used on focus because onclick still displayed the glow for a microsecond and made a horrible looking flash in terms of using it. This seemed to get rid after all the css methods failed.
Solution 15 - Google Chrome
That CSS goes from this file "tab-focus.less" in mixins folder (it could be difficult to find, because mixins are not shown at chrome dev-tools). So you should edit this:
// WebKit-style focus
.tab-focus() {
// Default
outline: thin dotted;
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
Solution 16 - Google Chrome
In the mixins of the Bootstrap sources Sass files, remove all $border
references (not in the outline variant).
@mixin button-variant($color, $background, $border){
$active-background: darken($background, 10%);
//$active-border: darken($border, 12%);
color: $color;
background-color: $background;
//border-color: $border;
@include box-shadow($btn-box-shadow);
[...]
}
Or simply code you own _customButton.scss mixin.
Solution 17 - Google Chrome
If someone is using bootstrap sass note the code is on the _reboot.scss file like this:
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
So if you want to keep the _reboot file I guess feel free to override with plain css instead of trying to look for a variable to change.
Solution 18 - Google Chrome
If you are using bootstrap v5.1 or any other version. To remove the outline of your bootstrap navbar toggle button do this:
.navbar-toggler:focus {
box-shadow: none !important;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>navbar</title>
</head>
<body>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Navbar toggler button</h5>
<span class="text-muted">Check the CSS to see how to remove the outline of the toggler button.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
-->
</body>
</html>
Hope this answer will help you.