ブートストラップ4でアウトラインが機能しない

Question

ブートストラップはどのようにHTMLアウトラインプロパティを無効にしますか？ フォームコントロールクラスを入力に追加すると、 "outline：none;"もはや動作しません。

<input class="form-control" style="outline:none;"> 

codepen：https://codepen.io/Eli92/pen/WXXbRa

私はちょうどこの入力のために私自身のCSSクラスを使用することができますが、私はここで何が起こっているかを知りたい、と私はバグレポートを提出する初心者のあまりです。

アウトラインを削除したい理由は、Youtubeのような外部要素に自分自身を追加することです。最も人気のあるサイトは検索バーにします。

Answer 1

実際には、境界線とボックスシャドウが集中し、すべてのフォームコントロールに適用されます。それを削除すると、ブートストラップで.form-control:focus宣言をオーバーライドするのと同じくらい簡単ですスタイリング

Answer 2

正確に知りたいことはわかりません。

私は正しく答えることができます。

要素のoutlineは、クリックするとその周りの境界線になります。コードパッドでoutline: noneをクリックすると、何も起こりません。したがって、あなたのoutline: noneは完全にうまく動作します。

borderは、そこに表示されているものです。ブートストラップも境界線を設定するので、border:noneを設定すると、私がその質問を理解する限りあなたの効果が得られます。

Answer 3

ブートストラップが.form-controlを定義していて、いくつかの特別な属性がこのクラスによって入力をブートストラップするために割り当てられているということです。

.form-control { 
    display: block; 
    width: 100%; 
    padding: .375rem .75rem; 
    font-size: 1rem; 
    line-height: 1.5; 
    color: #495057; 
    background-color: #fff; 
    background-image: none; 
    background-clip: padding-box; 
    border: 1px solid #ced4da; 
    border-radius: .25rem; 
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
} 

境界線を変更するためにクラスに追加したいのは、デフォルトを置き換えるものがあるためです。あなたが本当に要素に何の境界線を希望しない場合は、0px厚い

border: 0px; 

codepenに境界線を設定したいと思います：https://codepen.io/anon/pen/eeeNZB

Answer 4

.form-controlが:focus上box-shadow（ないアウトライン）を適用します。その削除する必要があります

.form-control:focus { 
    border: none; 
    box-shadow: none; 
} 

を設定し、

.form-control:focus { 
    box-shadow: none; 
}