How Can I Replace Radio Buttons with Images Using HTML and CSS?

Radio Buttons with Image Placeholders

To replace radio buttons with images, follow these steps:

1. Wrap Radio Button and Image in : Place the radio button and the corresponding image inside a element to associate them.
2. Hide Radio Button: To remove the appearance of the radio button, set its position to absolute, opacity to 0, and width and height to 0.
3. Target Image with Sibling Selector: Use the adjacent sibling selector ( ) to target the image next to the hidden radio button.
4. Style Checked Images: Apply styles to the image adjacent to the checked radio button, such as an outline or a color change.
5. Provide Alt Text: Ensure the image has an alt attribute for accessibility purposes, as it will serve as the radio button's label.

Here's a sample CSS and HTML code that demonstrates this solution:

/* 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>

The above is the detailed content of How Can I Replace Radio Buttons with Images Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!