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

190

誰かがBootstrapを変更する方法を知っていますinput:focusか？inputフィールドをクリックすると現れる青い輝き？

html  css  twitter-bootstrap 
— felix001
ソース
複数の場所でフォーカスセレクターを確認できるので、変更する必要があるのか​​どうかわかりません。
— felix001 2013
1
どうやら@mdoは、LESS変数を使用してグローの色を指定できるようにすることに対して100％です：github.com/twitter/bootstrap/issues/2742
— Ben Harold

回答:

223

最後に、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;
}
— felix001
ソース
3
私はターゲティングに遭遇しましたinput[type] {}
— Morpheus
2
これは、Bootstrap 3.xでは不要です。詳細については、私の回答を参照してください。
— Nate T
@Cricketこの変数は現在Boostrapカスタマイザでは使用できません:(
— Caumons 2013年
2
@Caumons今です。@input-border-focusこの答えの代わりに使用することをお勧めします。
— ネイトT
4
忘れましたselect
— David Morrow
169

.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の後にロードします。textarea、selectなどを含むすべての入力に適用されます...

— イガスター
ソース
これはOPが望んでいたものではありません。国境ではなく、輝きを変える方法を求めていました
— Kevin Martin Jose
8
@loneswordは正しいです。実際には、border-colorとshadow-colorの両方を変更する必要があります。私は答えを更新しました
— igaster 2015年
2
これは@ felix001のソリューションよりもはるかにクリーンで、機能します
— dspacejs
58

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

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

に _variables.scss更新@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);
  }
}
— ネイトT
ソース
4
これを達成または実行する方法の例はありますか？よろしく
— お願いします
2
BootstrapスタイルシートのLessまたはSassバージョンを使用する必要があります。次に、Bootstrapスタイルシートをインポートする前にカスタム変数を設定すると、Bootstrapのデフォルトが上書きされます。スタイルシートをプリコンパイルするか、Sprocketsなどを使用する必要があります。
— ネイトT
公式のブートストラップサイトを利用して、より少ない変数にカスタム変更を加えることもできます。getbootstrap.com
— red_trumpet
1
いいですが、ボタンやその他のリンクには適用されず、入力とテキストエリアだけに適用されます。ボタンの場合でも、たとえばでオーバーライドする必要があります.btn:focus { outline: none; }。
— 2014
この回答は、SASS / SCSSを使用するユーザーには有効です。@ input-order-focusはにあり_variables.scssます。
— TyMayn、2015
31

ここに画像の説明を入力してください ここに画像の説明を入力してください

このようにして、ブートストラップスタイルを変更せずに.form-control:focus 色を変更できます。

クイックフィックス

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

完全な説明

  1. 使用しているbootstrapCDNバージョンを見つけます。たとえば、私にとって今のところ4.3.1です：https : //maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
  2. 変更するクラスを検索します。たとえば.form-control:focus、CSSに変更するパラメーターをコピーします。この場合はborder-colorおよびbox-shadowです。
  3. の色を選択しborder-colorます。この場合.btn-success、ステップ1で説明したbootstrap.cssページで特定のクラスを検索することにより、ブートストラップがクラスに使用するのと同じグリーンを選択します。
  4. 選択した色をRGBに変換し、box-shadowブートストラップの透明度用の4番目のRGBAパラメーター（0.25）を変更せずに、パラメーターに追加します。
— dcx86
ソース
1
素晴らしく、シンプルで機能的で、緑色も必要です:)
— alfian5229 '26
13

Bootstrap v4.0.0ベータリリースの場合、Bootstrapをオーバーライドするスタイルシートに以下を追加する必要があります（ブートストラップv4.0.0ベータへのCDN /ローカルリンクの後に追加!importantするか、スタイリングに追加します：

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

box-shadowのborder-colorとrgbaを、希望するカラースタイルに置き換えます*。

12

Bootstrap 4では、SASSを自分でコンパイルする場合、次の変数を変更して、フォーカスシャドウのスタイルを制御できます。

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

注：Bootstrap 4.1以降、$input-btn-focus-colorおよび$input-btn-focus-box-shadow変数は入力要素にのみ使用され、ボタンには使用されません。ボタンのフォーカスシャドウはとしてハードコーディングされているbox-shadow: 0 0 0 $btn-focus-width rgba($border, .5);ため、$input-btn-focus-width変数を介してのみシャドウの幅を制御できます。

— ワシンガー
ソース
11

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;
}
— ピーター
ソース
1
クロムイエローのアウトラインを無効にするにはどうすればよいですか？
— ロイ・リー
実際、すべての：focusアウトラインを無効にしないでください（上で提案したとおり）。キーボードのみのユーザーにとってアクセシビリティにとって恐ろしいです。上記のようにプラットフォームのデフォルトを無効にして、適切にアクセス可能なものを追加できます：（outline: dotted thin black;またはテストが機能することを示唆するものは何でも）
— peater
8

青い輝きを無効にするには（ただし、コードを変更して色、サイズなどを変更できます）、これをCSSに追加します。

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

これは効果を示すスクリーンキャプチャです：前後： ここに画像の説明を入力してください ここに画像の説明を入力してください

— radhoo
ソース
これでうまくいきました。しかし、それはそれがそれがそれがそれを青のままにするであろうので、私はまたボーダーカラーを加えなければなりませんでした。
— レイチェルS
6

グローを完全に無効にする方法を探して、このスレッドに着地しました。私の目的のために、多くの回答が複雑すぎました。簡単に解決するには、次のようにCSSを1行追加するだけです。

input, textarea, button {outline: none; }
— マサニシ
ソース
2
あなたbox-shadow: none;も必要だと思います。
— silverliebt 2017年
2
それは私のために働い!importantたbox-shadowが、@ silverliebtによって提案された後に追加しなければならなかった
— Jefrey Sobreira Santos
5

bodyタグにIDを追加します。独自のCss（bootstrap.cssではない）で、新しい本体IDをポイントし、オーバーライドするクラスまたはタグと新しいプロパティを設定します。これで、変更を失うことなく、いつでもブートストラップを更新できます。

htmlファイル： 

  <body id="bootstrap-overrides">

cssファイル： 

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

参照：ブートストラップCSSをオーバーライドする最良の方法

— ホームフリーランサー
ソース
5

実際、Bootstrap 4.0.0-Beta（2017年10月現在）では、input要素はinput [type = "text"]によって参照されておらず、input要素のすべてのBootstrap 4プロパティは実際にはフォームですベースです。

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

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

実装はかなり簡単で、border-colorプロパティを変更するだけです。

— Mindsectチーム
ソース
または、scssを使用する場合は、ブートストラップ4.0.0-Betaの$ input-focus-border-color変数をオーバーライドするだけ
— Zuhaib Ali
これも追加する必要があると思いますbox-shadow: xpx ypx #80bdff;
1

Bootstrap 3.3.7では、カスタマイザのフォームセクションで@ input-border-focus値を変更できます。 ここに画像の説明を入力してください

— スティーブ
ソース
1

上に構築@ wasingerの返答上記にブートストラップ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;
— ゴルヴェン
ソース
0

CSSではこれを解決できませんでした。ブートストラップ後にsite.cssを使用しているにもかかわらず、Boostrapが最後の発言を得ているようです。いずれにしても、これは私にとってはうまくいきました。

$(document).ready(function () {
    var elements = document.getElementsByClassName("form-control");

    Array.from(elements).forEach(function () {
        this.addEventListener("click", cbChange, false);
    })

    });

function cbChange(event) {
    var ele = event.target;
    var obj = document.getElementById(ele.id);
    obj.style.borderColor = "lightgrey";
}

後で私はこれがCSSで動作することを発見しました。明らかにフォームコントロールのみで

.form-control.focus, .form-control:focus {
    border-color: gainsboro;
}

以下は、Chrome開発者ツールの前と後の写真です。フォーカスオンとフォーカスオフの境界線の色の違いに注意してください。余談ですが、これはボタンでは機能しません。ボタン付き。ボタンを使用して、outlineプロパティをnoneに変更する必要があります。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

— ダン
ソース
0

フォーカス前の入力ボーダー用。あなたが使いたいあなたの好きな色とパディングなどの他のCSSを指定することができます


.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

入力に焦点を合わせると。あなたが望むあなたの好きな色の輪郭を指定することができます


.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}
— サチン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.