Bootstrap button - remove outline on Chrome OS X-第2页回答

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 button focus twitter-bootstrap-3 outline

15条回答

该账号已被封号

2楼-- · 2019-03-10 23:53

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.

0人赞添加讨论(0) 举报

相关推荐>>

3楼-- · 2019-03-10 23:58

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;
}

0人赞添加讨论(0) 举报

走好不送

4楼-- · 2019-03-10 23:58

With scss:

$btn-focus-box-shadow: none!important;

0人赞添加讨论(0) 举报

神经病院院长

5楼-- · 2019-03-10 23:59

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.

0人赞添加讨论(0) 举报

等我变得足够好

6楼-- · 2019-03-11 00:00

Search and replace

outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;

Replace to

outline: 0;

0人赞添加讨论(0) 举报

放我归山

7楼-- · 2019-03-11 00:01

This will remove it - short and clean:

.btn {
    outline: none !important;
}

0人赞添加讨论(0) 举报

Bootstrap button - remove outline on Chrome OS X

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间