发表新帖
发表新帖

Bootstrap button - remove outline on Chrome OS X

前端 未结
关注
16 1847
后悔当初
后悔当初 2021-02-01 12:31

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 per

相关标签:
16条回答
  • 南笙
    2021-02-01 12:57

    If the above answers still do not work, add this:

    button:focus{
    outline: none!important;
    box-shadow:none;
}
    0 讨论(0)
  • 无人共我
    2021-02-01 12:57

    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.

    0 讨论(0)
  • 说谎
    2021-02-01 12:58

    The simplest solution is: Create a CSS file and type this:

    .btn:focus, .btn:active:focus, .btn.active:focus {
    box-shadow: none !important;
}
    0 讨论(0)
  • 时光说笑
    2021-02-01 13:03

    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 :focused elements — that's what's causing it.

    Update - For Bootstrap v4:

    .btn:focus {
  box-shadow: none;
}
    0 讨论(0)
  • 夕颜
    2021-02-01 13:04

    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)
  • 后悔当初
    2021-02-01 13:05

    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)
 看不清?
提交回复
热议问题