CSS – inputタグの青い枠について

<input>タグの青い枠はユーザーがマウス等でクリックしたり、キーボードから選択した時に表示されます。これは現在のフォーカス（選択中）を明示しています。

<input>タグはデフォルトのCSS状態だと、フォーム等にフォーカス（マウスをクリックしたり、キーボードから選択）しても青い枠の状態のままです。これらはCSSの擬似クラス:focusを使用しプロパティのoutlineを触ることで変更可能です。

また<input>タグにも様々な型（type="text" type="email" type="password"など）がりそれぞれの型に応じて変えることも可能です。

:focusの使用例

すべての<input>タグに適用させたい場合は下記のように指定します。

input:focus{
	outline:4px solid pink;
}

特定の型に適用させたい場合は下記のように指定します。

input:focus[type="text"]{
	outline:4px solid orange;
}

input:focus[type="email"]{
	outline:4px solid black;
}

outlineを埋め込みたい場合

outline-style:auto;で:focus時の線を内側に埋め込むことができます。

input:focus{
	outline:3px solid red;
	outline-style:auto;
}

青い枠を消したい場合

input:focus{
	outline:none;
}

上記のように指定すれば青い枠を消せますがユーザー側には分かりにくいので、何かしらのCSSは設定しておいた方が無難かと思います。よくあるデザインだと通常時とフォーカス時のデザインを用意しておけば分かりやすいと思います。

CSSを使って通常時とフォーカス時を適用させる

<input>要素に通常時のCSSとフォーカス時のCSSを用意することで視覚的にわかりやすくなります。

input:focus{
	outline:none;
}
input[type="text"]{
	border:2px solid violet;
}
input:focus[type="text"]{
	border:2px solid silver;
}

outlineを無効化してborderなどでもフォーカス時のデザインは変更。