The reason for the image appearing behind the element is because a background-image is being used in this case. To resolve this, you can utilize the ::before pseudo-element:
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label {
height: 20px;
display:block;
padding: 0;
vertical-align: top;
}
input[type="checkbox"] + label::before {
content: url("uncheck.png");
width: 20px;
height: 20px;
padding-right: 3px;
}
input[type="checkbox"]:checked + label::before {
content: url("checked.png");
}
This method is the simplest way to incorporate images into elements using CSS. Initially, background-image was utilized before browsers fully supported ::before. However, all browsers that support :checked also support ::before.
Additional modifications made include:
- Added quotes around strings for the attribute selector and URLs.
- Changed
padding: 0 0 0 0px; to padding: 0;, as both have the same effect.
- Removed duplicate styles between
:checked and default styles. The properties of width, height, and padding-right will apply to :checked + label::before as well as the unchecked version.