フォームのinput要素をfocusした時の枠の色を変える方法！

フォームのinput要素をfocusした時の色を変更したい時があります。

例えばフォームのinput[type="text"]のテキストボックスにフォーカスを当てると青い枠が表示される事があります。

今回この青い枠の色を変える方法についてサンプルコード付きで解説していきます。

この青い枠の正体ですが、擬似クラスの:focus時に設定されているoutlineプロパティによる表示結果です。

つまりこの枠の色を変えたい場合は、

• :focus時のoutlineの色を変更する
• :focus時のoutlineを無効にして別途デザインする

まずはoutline（輪郭線）の色を変える方法を紹介します。枠の正体はoutlineプロパティですので、このoutlineプロパティの設定を上書きします。

下記のサンプルコードを見てみましょう。

上記のサンプルコードのプレビューで「クリックして下さい」というところをクリックすると、今度は赤いかつ太い線が表示されているかと思います。

これは:focus時のoutlineのプロパティの値をCSSで上書きしているためです。このように枠のデザインをoutlineプロパティで変更することが出来ます。

次にoutline（輪郭線）は無効にしてborder（枠線）を別途設定する方法です。

この場合は:focus時のoutlineは0で設定をして無効にして、別途borderプロパティを設定しています。

このやり方でも見た目上で枠の線の色を変更することが出来ます。

こちらもoutlineプロパティを無効にして、別途box-shadowプロパティで枠線の見た目を付ける方法です。

box-shadowプロパティの設定は上下左右斜めに赤の影を付け縁取りをする形で枠線の見た目にしています。