ブートストラップボタンをクリックすると青いアウトラインが表示される

これを追加しましたが、ボタンをクリックすると青い輪郭が表示されます。

.btn:focus {
  outline: none;
}

その醜いものを削除する方法？

プロパティが上書きされている可能性があります。 !important：activeと一緒にコードにアタッチしてみてください。

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

また、ボックスシャドウを追加してください。そうしないと、ボタンの周りにシャドウが表示されます。

これは！importantを使用するのは良い習慣ではありませんが、より具体的なクラスを使用して、！importantを使用してcssを適用することをお勧めします...

Bootstrapの最新バージョンでは、アウトライン自体の削除は機能しません。ボックスシャドウもあるので、これを追加する必要があります。

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

shadow-none無効にするための組み込みのブーストラップクラスがありますbox-shadow（ではありませんoutline）（https://getbootstrap.com/docs/4.1/utilities/shadows/）。これはボタンの影を取り除きます：

<button class='btn btn-primary shadow-none'>Example button</button>

以下のコードを試してください

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

これはChromeで起こっていました（Firefoxではできませんでした）。outlineプロパティがBootstrapによってとして設定されていることがわかりましたoutline: 5px auto -webkit-focus-ring-color;。outline次のようにカスタムCSSで後でプロパティをオーバーライドすることで解決します。

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

これはボタンをテキストで解決し、ボタンのみアイコンまたはボタンはリンクです：

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

追加した場合 border:none !important;

{
    border:none !important;
    outline:none !important;
}

クリックするとボタンが小さくなります。

これを試して

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

Bootstrap 4ではbox-shadow: 0 0 0 0px rgba(0,123,255,0);、：focusで使用 し、問題を解決しました。

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

値を0に設定してボタンからアウトラインを削除した後でも、ボタンをクリックすると変な動作が発生し、サイズが少し縮小します。だから私は最適なソリューションを思いつきました：

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

お役に立てれば...

適切なネストを使用し、それにスタイルを適用する必要があります。

• ボタンを右クリックし、（Firefoxのfirebugを使用して要素を検査）、（chromeの要素を検査）を使用して、そのクラスのネストを正確に見つけます。

• クラス全体にスタイルを追加します。それだけでうまくいく

私の場合、ボタンをクリックした後、これは非常に便利です。

$('#buttonId').blur();

上の境界線の幅を単に削除することを選択しました:focus。これにより、アウトラインとボタンの丸い角の間の醜いスペースが削除されます。何らかの理由で、この問題は実際のボタン要素でのみ発生し、要素では発生しません<a class="btn">。

button.btn:focus {
  border-width: 0;
}

これは、誰かがまだこの問題を解決していない場合に役立ちます。

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

これがボタンのアウトラインを削除する私のBoostrap 4ソリューションです

/*
* Boostrap 4
* Remove blue outline from button
*/

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

私は同じ問題を抱えていて、次のコードがうまくいきました：

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

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

それが役立つことを願っています！

実際には、ブートストラップでは、すべてのケースですべての変数が定義されています。あなたのケースでは、「_ variables.scss」ファイルからデフォルト変数「$ input-btn-focus-box-shadow」をオーバーライドする必要があります。そのような： $input-btn-focus-box-shadow: none; 独自のカスタム「_yourCusomVarsFile.scss」でその変数をオーバーライドする必要があることに注意してください。そして、そのファイルはプロジェクトに最初の順序でインポートしてから、次のようにブートストラップする必要があります。

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

ブートストラップ変数は、フラグ '！default'に対応しています。

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

したがって、ファイルでは、デフォルト値を上書きします。ここにイラスト：

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

最初の変数は2番目の変数よりも優先されます。残りの州やケースも同様です。それがあなたを助けることを願っています。

以下は、リポジトリの「_variable.scss」ファイルです。ここでは、ブートストラップからすべてのイニシャル値を見つけることができます。https：//github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

チアーズ

a:focus {
  outline: none;
}

これは私にとってBS3で機能します

これはBootstrap 4で私のために働きました：

.btn {border-color: transparent;}

試す

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

ボタンが次のようなアンカーの内側にある場合は注意してください。

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

ボタン自体にスタイルを追加するだけでは不十分な場合があります。必要にa:focus, a:active { outline: none }応じてCSSルールを追加する必要があります（これは私にとってはうまくいきました）。

以下をお試しください

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

時々{outline: 0}問題を解決しなかった、そして私たちは試すことができます{box-shadow: none;}

ブートストラップ4を使用していますが、アウトラインとボックスシャドウを使用できます。

#buttonId {
    box-shadow: none;
    outline: none;
}

または、ボタンが背景のないdivのような要素内にある場合は、ボックスシャドウで十分です。

#buttonId {
     box-shadow: none;
}

例：https : //codepen.io/techednelson/pen/XRwgRB

バージョン4.3以降を使用している場合、コードは正しく機能しません。これは私が使用したものです。それは私のために働いた。

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

代わりに、ボタンクラス（.btn）をターゲットにするために、ここではボタン要素自体をターゲットにし、それが私のために機能します。

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

またshadow-none、入力フィールドにクラスを使用できます

これが非CSSメソッドです。JQueryを使用して、要素がクリックされるたびに「focus」クラスを削除するだけです。

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

この方法では、境界線が点滅して一時的に元に戻る場合がありますが、これは私の見た目では悪くありません（ボタンをクリックしたときの応答の一部のように見えます）。

.mousemove（）を使用した理由は、.click（）と.mouseup（）の両方が効果がないことが判明したためです。

これらの値を変更すると、うまくいきました。Chromeの開発者ツールを見て見つけた

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

これにより、ボタンの影も保持され、クリック時にボタンの色が変更されるだけです。

正確なブートストラップステートメントをオーバーライドします。

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

ボーダーの色を灰色に戻します

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

すべての要素（ボタンだけでなく）のSCSS方法：

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}