html - ブートストラップ入力フォーカスの青い輝きを変更します

Question

Bootstrapを変更する方法を知っている人はいますinput:focusか？フィールドをクリックすると表示される青い輝きinput？

Answer 1

最後に、bootstrap.css の次の css エントリを変更しました

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Answer 2

.form-controlセレクターを使用して、すべての入力を一致させることができます。たとえば、赤に変更するには:

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

カスタム css ファイルに入れて、bootstrap.css の後にロードします。テキストエリア、選択などを含むすべての入力に適用されます...

Answer 3

Bootstrap 3.x を使用している場合は、新しい@input-border-focus変数で色を変更できるようになりました。

詳細と警告については、コミットを参照してください。

_variables.scss updateで@input-border-focus。

このグローのサイズ/他の部分を変更するには、mixins/_forms.scssを変更します

@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
  }
}

Answer 4

Chrome でプラットフォームのデフォルトの「黄色」のアウトラインを表示する場合の変更は次のとおりです。

textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-    input:focus {
    border-color: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}

Answer 5

青いグローを無効にするには (ただし、コードを変更して色やサイズなどを変更できます)、これを css に追加します。

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

これは効果を示すスクリーンキャプチャです: 前後:

Answer 6

グローを完全に無効にする方法を探して、このスレッドにたどり着きました。私の目的には、多くの答えが複雑すぎました。簡単な解決策として、次のように 1 行の CSS が必要でした。

input, textarea, button {outline: none; }

Answer 7

実際、Bootstrap 4.0.0-Beta (2017 年 10 月現在) では、入力要素はinput[type="text"]によって参照されていません。入力要素のすべての Bootstrap 4 プロパティは、実際にはフォームベースです。

したがって、.form-control:focusスタイルを使用しています。入力要素を「オンフォーカス」で強調表示するための適切なコードは次のとおりです。

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

実装は非常に簡単で、border-colorプロパティを変更するだけです。

Answer 8

上記の@wasingerの返信に基づいて、Bootstrap 4.5では、色変数だけでなくbox-shadowそれ自体もオーバーライドする必要がありました。

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;

Answer 9

なぜ使用しないのですか？

 input:focus{
        outline-color : #7a0ac5;
    }