Bootstrapでフォームの入力時に青く光らせない

スポンサーリンク

Bootstapを利用していると、フォームの入力フォーカス時に、テキストフィールドの周りが青く光るのを無効化したくなる時があります。サイトのデザインに合うようCSSを設定する方法です。

bootstrapの入力フォーカス時の青く光るのはborderではない

テキストフィールドやテキストエリアのfocus・Active時にCSSでborderを設定しても、青く光ってしまうのが無効化できませんでした。調べてみると、Bootstrapで指定しているのが、Borderではなくoutlineでした。
outline:0をCSSに追加することで、青く光るのを無効化できます。

入力時に青く光るのを無効化して茶色の影をつけるサンプルCSS


.form-control:focus, input:hover, input:active, textarea:hover, textarea:active{
    outline: 0;
    border-color: var(--accent_color ,#66514D);
    box-shadow: 2px 2px 2px var( --accent_color ,#66514D);
}

スポンサーリンク

逆引き辞典 

この記事と一緒によく読まれています!