CSSでチェックされたすべてのinput要素にスタイルを適用する方法
Webページ上のチェックされた（選択済みの）<input>要素すべてにスタイルを適用したい場合、CSSの:checked擬似クラスを使用します。このセレクターを使うことで、チェックボックスやラジオボタンが選択された状態のときだけ、特定のスタイルを反映させることができます。
以下は、:checkedセレクターを使って、チェックされたinput要素のサイズを変更する具体的な実装例です。
コード例
<!DOCTYPE html>
<html>
<head>
<style>
input:checked {
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<p>好きなスポーツ：</p>
<form action="">
<input type="checkbox" value="Football">サッカー<br>
<input type="checkbox" value="Cricket">クリケット<br>
<input type="checkbox" checked="checked" value="Tennis">テニス<br>
<input type="checkbox" value="Badminton">バドミントン
</form>
</body>
</html>
コードの解説
この例では、input:checkedというセレクターを指定することで、チェック状態にあるすべてのinput要素に対して、幅と高さを20pxに設定しています。フォーム内には4つのチェックボックスがあり、そのうち「テニス」にはあらかじめchecked属性が付与されているため、ページを開いた時点でこのスタイルが適用されます。
表示結果
ブラウザで上記のコードを実行すると、チェックが入っている「テニス」のチェックボックスだけが20px×20pxのサイズで表示され、チェックされていない他のチェックボックスはデフォルトサイズのまま表示されます。ユーザーが他のチェックボックスをクリックしてチェックを入れると、その瞬間にスタイルが動的に適用されることも確認できます。
このように:checkedセレクターを活用すれば、JavaScriptを使わずにCSSだけでチェック状態に応じた見た目の変化を実現できるため、フォームのUX向上に役立ちます。
-
CSSの:validセレクターで有効な値を持つinput要素をスタイリングする方法
CSSの:validセレクターを使用すると、有効な値が入力されたすべての<input>要素に対してスタイルを適用できます。 :validセレクターとは :validセレクターは、フォームの入力内容がバリデーション（妥当性チェック）を通過した場合にのみスタイルを適用する擬似クラスです。たとえば、type=emailの入力欄に正しい形式のメールアドレスが入力されたときだけ、背景色や文字色を変えるといった使い方ができます。逆に、無効な値が入力された場合にスタイルを適用したい場合は「:invalid」セレクターを使用します。両者を組み合わせることで、ユーザーに入力の正誤を視覚的にフィードバ
-
CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説
CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-