How Can I Replace Default Checkbox Images with Custom On/Off Images Using Pure CSS?

Pure CSS Checkbox Image Replacement

In an HTML table with a checkbox list, you might want to replace the default checkbox image with custom on/off images. CSS can be leveraged to achieve this aesthetic enhancement.

CSS Custom Input Technique

As mentioned by "CSS ninja," one approach involves using a pseudo class to style the label associated with the checkbox, rather than the checkbox itself. This ensures that the image is displayed in the correct position and responds to the checkbox's state.

CSS Code Implementation

Provided below is the complete CSS code that will hide the actual checkbox and associate it with a styled label:

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: block;
  width: 16px;
  height: 16px;
  background: url('/images/off.png') 0 0px no-repeat;
}

input[type="checkbox"]:checked + label {
  background: url('/images/on.png') 0 0px no-repeat;
}

Here's a breakdown of the code:

• The checkbox (input[type="checkbox"]) is hidden using display: none;.
• The label associated with the checkbox (input[type="checkbox"] label) is styled to have a block display, a width and height of 16px, and a background image of the "off" state image.
• When the checkbox is checked (input[type="checkbox"]:checked), a new background image of the "on" state image is applied to the label.

Result

This CSS code will successfully replace the default checkbox image with custom on/off images, giving you a more visually appealing and customizable checkbox list. You can experiment with different image designs to match your specific web design aesthetic.

The above is the detailed content of How Can I Replace Default Checkbox Images with Custom On/Off Images Using Pure CSS?. For more information, please follow other related articles on the PHP Chinese website!