Bootstrap按钮 - 删除Chrome OS上的大纲

发布于 2025-01-24 22:45:10 字数 306 浏览 7 评论 0原文

我希望实现这一目标： http://getbootstrap.com/javascript/javascript/#popovers-examples-examples-examples-exmples - 按下了OS X上的Chrome中的红色弹出式按钮。。。。。

演示”并

它在Safari和Firefox中看起来正确，但在Chrome中没有一个！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

杀お生予夺 2025-01-31 22:45:11

在Bootstrap 4中，该轮廓不再使用，而是盒子阴影。如果是您的情况，请执行以下操作：

.btn:focus {
    box-shadow: none;
}

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 原文

饮湿 2025-01-31 22:45:11

与SCSS：

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

With scss:

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

回复收藏 0 原文

痴情换悲伤 2025-01-31 22:45:11

.btn.Active或.btn.focus单独不能替代 Bootstrap的样式。对于默认主题：

.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus {
      outline: none;
}

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

回复收藏 0 原文

多彩岁月 2025-01-31 22:45:11

最简单的解决方案是：创建一个CSS文件并输入以下内容：

.btn:focus, .btn:active:focus, .btn.active:focus {
    box-shadow: none !important;
}

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

.btn:focus, .btn:active:focus, .btn.active:focus {
    box-shadow: none !important;
}

回复收藏 0 原文

超可爱的懒熊 2025-01-31 22:45:11

您可以在不做任何额外的CSS的情况下删除阴影。

通常添加这样的按钮。
＆lt; button class =“ btn btn-primary”＆gt; button＆lt;/button＆gt;

您可以简单地添加shadow> shadow> shadow-none即可删除轮廓。

＆lt; button class =“ btn btn-primary shadow-none”＆gt; button＆lt;/button＆gt;

回复收藏 0 原文

送你一个梦 2025-01-31 22:45:11

这将删除它 - 简短干净：

.btn {
    outline: none !important;
}

This will remove it - short and clean:

.btn {
    outline: none !important;
}

回复收藏 0 原文

千秋岁 2025-01-31 22:45:11

这是解决方案：

#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>

这有效100％希望它对您有所帮助。

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 原文

笑饮青盏花 2025-01-31 22:45:11

搜索并替换

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

为

outline: 0;

Search and replace

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

Replace to

outline: 0;

回复收藏 0 原文

另类 2025-01-31 22:45:11

如果以上答案仍然不起作用，请添加以下内容：

button:focus{
    outline: none!important;
    box-shadow:none;
}

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

button:focus{
    outline: none!important;
    box-shadow:none;
}

回复收藏 0 原文

亂 2025-01-31 22:45:11

压力如此压力后，它适用于我的bootstrap按钮

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none!important;
    box-shadow: none;
}

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

回复收藏 0 原文

荒人说梦 2025-01-31 22:45:11

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

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

回复收藏 0 原文

追我者格杀勿论 2025-01-31 22:45:11

您可以将此标签放入HTML。

<button class='btn btn-primary' onfocus='this.blur'>
     Button Text
</button>

我之所以使用焦点，是因为OnClick仍然显示了微秒的光芒，并在使用它方面使闪光看起来很可怕。在所有CSS方法失败之后，这似乎被摆脱了。

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.

回复收藏 0 原文

叹倦 2025-01-31 22:45:11

CSS从Mixins文件夹中的“ Tab-cocus.less”中进行了（可能很难找到，因为Mixins在Chrome Dev-Tool中未显示）。因此，您应该编辑此：

// WebKit-style focus 

.tab-focus() {
      // Default
      outline: thin dotted;
      // WebKit
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

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

回复收藏 0 原文

沫雨熙 2025-01-31 22:45:11

在Bootstrap源SASS文件的Mixins中，删除所有$ border参考（不在大纲中）。

@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);
  [...]
}

或简单地代码您拥有_custombutton.scss mixin。

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 原文

糖果控 2025-01-31 22:45:11

如果有人使用bootstrap sass注意，则代码在_reboot.scss文件上，例如：

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

，如果您想保留_reboot文件，我想可以随意使用普通的CSS覆盖，而不是尝试寻找可变的变量来更改。

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 原文

忆梦 2025-01-31 22:45:11

Bootstrap 5及以上

.btn-primary {-bs-bs-btn-pocus-shadow-rgb：none;}

回复收藏 0 原文

夏末的微笑 2025-01-31 22:45:11

如果您使用的是Bootstrap v5.1或任何其他版本。要删除Bootstrap Navbar切换按钮的大纲执行此操作：

.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>

希望这个答案对您有帮助。

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.

回复收藏 0 原文

你的心境我的脸 2025-01-31 22:45:10

我看到.btn：focus上有一个概述：

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

尝试将其更改为：

.btn:focus {
  outline: none !important;
}

基本上，在上查找概述的任何实例：focus ed元素 - 这就是导致它的原因。

更新 - 用于Bootstrap V4：

.btn:focus {
  box-shadow: none;
}

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 原文

梦里人 2025-01-31 22:45:10

对于像我这样的任何Googles，

.btn:focus {
    outline: none;
}

在Google Chrome中仍然无法使用的任何Googles，以下内容应完全删除任何按钮光泽。

.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
}

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

回复收藏 0 原文

无力看清 2025-01-31 22:45:10

.btn:focus, .btn:active:focus, .btn.active:focus{
    outline:none;
    box-shadow:none;
}

这应该删除轮廓和盒子阴影

.btn:focus, .btn:active:focus, .btn.active:focus{
    outline:none;
    box-shadow:none;
}

This should remove outline and box shadow

回复收藏 0 原文

~没有更多了~

关于作者

木槿暧夏七纪年

暂无简介

文章

28 人气

关注发私信

友情链接

文江博客

Bootstrap按钮 - 删除Chrome OS上的大纲

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（20）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

Bootstrap按钮 - 删除Chrome OS上的大纲

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（20）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。