web-dev-qa-db-ja.com

Bootstrapボタン-Chrome OS Xのアウトラインを削除

http://getbootstrap.com/javascript/#popovers-examples -「ライブデモ」までスクロールし、Chromeの赤いポップオーバーボタンを押します。 _ OS Xで…。完璧に美しい

ここに移動します（問題の子）： http://yoyo.io/javascript/#popovers -青の輪郭線、aaaargh。

調べてみると、CSSを削除するためのCSSの努力がたくさんあります。 SafariとFirefoxでは正しいように見えますが、Chromeではうまくいきません！

誰でも-私は何を見落としていますか？

事前に感謝します！

google-chromebuttonfocustwitter-bootstrap-3outline
46
user1583909

.btn:focusにはoutlineがあります：

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

これを次のように変更してみてください：

.btn:focus {
  outline: none;
}

基本的に、:focused要素のoutlineのインスタンスを探します。それが原因です。

83
Nick Heer

私のようなグーグルのために、どこに..

.btn:focus {
    outline: none;
}

google Chromeではまだ機能しませんでしたが、次のボタングローは完全に削除されます。

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

これにより、アウトラインとボックスの影が削除されます

25
sidhartha madipalli

bootstrap 4では、アウトラインは使用されなくなりましたが、ボックスシャドウです。それがあなたの場合は、次のようにしてください：

.btn:focus {
    box-shadow: none;
}
12
George Henrique

.btn.activeまたは.btn.focusだけではオーバーライドブートストラップのスタイルはできません。デフォルトテーマの場合：

.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus {
      outline: none;
}
5
Narch Tranch

Scssの場合：

$btn-focus-box-shadow: none!important;
5
Hannes Be

これはそれを削除します-短くてきれい：

.btn {
    outline: none !important;
}
1
Entertain

検索と置換

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

に置換

outline: 0;
1
Calvin Grain

最も簡単な解決策は次のとおりです。CSSファイルを作成し、次のように入力します。

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

これが解決策です：

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

これがうまくいくことを願っています。

1
nixx

そのCSSは、mixinsフォルダー内のこのファイル「tab-focus.less」から取得します（mixinはchrome dev-toolsに表示されないため、見つけるのは難しいかもしれません）。したがって、これを編集する必要があります。

// WebKit-style focus 

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

誰かがbootstrap sassを使用している場合、コードは次のように_reboot.scssファイルにあります。

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

したがって、_rebootファイルを保持したい場合は、変更する変数を探すのではなく、プレーンCSSで自由にオーバーライドできると思います

0
Diego Ponciano

上記の答えがまだ機能しない場合は、これを追加してください：

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

このタグをHTMLに挿入できます。

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

Onclickはまだマイクロ秒の間グローを表示し、それを使用するという点で恐ろしく見えるフラッシュを作ったので、フォーカスに使用しました。これは、すべてのcssメソッドが失敗した後に削除されるように見えました。

0
Evan Burbidge

BootstrapソースSassファイルのミックスインで、すべての$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を所有するコードを作成します。

0
RizzCandy