4.1 疑似クラス :checked
CSSのフォームの疑似クラスは、要素の状態に応じたフォームのスタイリングを可能にしてくれるんだ。 これらの疑似クラスによって、インタラクティブかつアクセスしやすいフォームを作成することで、ユーザーインターフェースと体験が向上するよ。 疑似クラス:checked、:disabled、:enabled、:invalidについて詳しく見ていこう。
疑似クラス :checked は、"選択されている"状態のフォーム要素に適用されるんだ。これはチェックボックス (<input type="checkbox">)、ラジオボタン (<input type="radio">)、オプション (<option>) に関係するよ。
構文:
セレクタ:checked {
プロパティ: 値;
}
使用例
この例では、選択されているチェックボックス、ラジオボタン、オプションが、"選択されている"状態のときに対応する背景色を持つようになるよ:
/* 選択されたチェックボックスのスタイリング */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* 選択されたラジオボタンのスタイリング */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* 選択されたオプションのスタイリング */
option:checked {
background-color: #e74c3c;
}
4.2 疑似クラス :disabled
疑似クラス:disabledは、無効な状態のフォーム要素に適用されるよ。これは一時的に操作できない要素をスタイリングするのに便利なんだ。
構文:
セレクタ:disabled {
プロパティ: 値;
}
使用例
この例では、無効な入力フィールドとボタンが、それに応じた背景色、境界線、テキストを持ち、カーソルが"禁止"になるよ:
/* 無効な入力フィールドのスタイリング */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* 無効なボタンのスタイリング */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 疑似クラス :enabled
疑似クラス:enabledは、有効な状態のフォーム要素に適用されるよ。 これは操作可能な要素をスタイリングするのに役立つんだ。
構文:
セレクタ:enabled {
プロパティ: 値;
}
使用例
この例では、有効な入力フィールドとボタンが、それに応じた背景色、境界線、テキストを持ち、カーソルが"ポインタ"に変わるよ:
/* 有効な入力フィールドのスタイリング */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* 有効なボタンのスタイリング */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 疑似クラス :invalid
疑似クラス:invalidは、バリデーションに失敗したフォーム要素に適用されるよ。これは不正なデータを含む入力フィールドをスタイリングするのに役立つんだ。
構文:
セレクタ:invalid {
プロパティ: 値;
}
使用例
この例では、不正な入力フィールドとテキストエリアが、バリデーションに失敗したことを視覚的に示すために、対応する境界線と背景色を持つようになるよ:
/* 不正な入力フィールドのスタイリング */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* 不正なテキストエリアのスタイリング */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 完全な実装例
/* 選択されたチェックボックスのスタイリング */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* 選択されたラジオボタンのスタイリング */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* 無効な入力フィールドのスタイリング */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* 無効なボタンのスタイリング */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* 有効な入力フィールドのスタイリング */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* 有効なボタンのスタイリング */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* 不正な入力フィールドのスタイリング */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* 不正なテキストエリアのスタイリング */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォーム疑似クラスの例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION