HTML と CSS を使用してラジオ ボタンを画像に置き換えるにはどうすればよいですか?

画像プレースホルダーを含むラジオ ボタン

ラジオ ボタンを画像に置き換えるには、次の手順に従います。

1. ラジオボタンと画像を で囲みます:ラジオボタンと、 内の対応する画像
2. ラジオ ボタンを非表示にする: ラジオ ボタンの外観を削除するには、ラジオ ボタンの位置を絶対値、不透明度を 0、幅と高さを 0 に設定します。
3. 兄弟セレクターを使用したターゲット画像: 隣接する兄弟セレクター ( ) を使用して、非表示の隣の画像をターゲットにします
4. スタイルをチェックした画像: チェックしたラジオ ボタンに隣接する画像に、輪郭や色の変更などのスタイルを適用します。
5. 提供Alt Text: 画像にはラジオ ボタンとして機能するため、アクセシビリティを目的とした alt 属性があることを確認してください。 label.

このソリューションを示すサンプル CSS および HTML コードを次に示します。

/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

<label>
  <input type="radio" name="test" value="small" checked>
  <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1">
</label>

<label>
  <input type="radio" name="test" value="big">
  <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2">
</label>

以上がHTML と CSS を使用してラジオ ボタンを画像に置き換えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。