【CSS】擬似クラス focus

focus CSS擬似クラスは、inputやtextareaなどフォーム要素を使ってフォームにてマウスでクリックすると、選択されたフォームの入力枠の色が変わったりする、アクションを起こします。

入力欄を作成するinput要素に:focusの疑似クラスをつけて利用しています。

要素名:focus { プロパティ名 : 値; }

　input {
　　　border:1px solid #666;
　　　line-height:1.5em;
　　　width:60%;
　　　}
　input:focus {
　　　background-color: yellow;
　　　width:80%;
　　　}

:focusの疑似クラスにより、入力欄をクリックした時に、背景色が黄色になり、また横幅も長くなるようにスタイルを装飾しました。

お名前：

inputタイプの「submit」ボタンに:focusの疑似クラスを適用させてみました。クリックするとボーダーの角丸、背景色と文字色を軽く装飾しました。

CSS

　input {
　　　border:1px solid #666;
　　　line-height:1.5em;
　　　}

　input[type=submit]:focus{
　　　background-color:#999;
　　　border-radius:5px;
　　　color:#FFF;
		}

HTML

.
<input type="submit" name="btn" value="送信">
		}
.