如何使用 CSS 将默认复选框替换为自定义图像？

使用图像替换自定义 CSS 复选框样式

您在使用 CSS 用自定义图像替换默认复选框外观时遇到了障碍。尽管使用了 CSS Ninja 教程，您仍然面临着实现所需结果的困难。

需要澄清的是，该技术涉及对复选框的关联标签进行样式设置，而不是对复选框本身进行样式设置。这允许完整的图像定制。但是，您必须确保隐藏实际的复选框元素，以避免显示其本机外观。

以下是您提供的 CSS 的细分：

td:not(#foo) > input[type=checkbox] + label {
    background: url('/images/off.png') 0 0px no-repeat;
    height: 16px;
    padding: 0 0 0 0px;
}

此 CSS 面向直接关联的标签表格单元格中的复选框没有 ID“foo”。它将标签的背景图像设置为“off.png”，指定其高度和填充，并将图像定位在左上角。

要设置“on”状态，请使用以下 CSS：

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

它的目标元素与之前相同，但仅限于复选框处于选中状态时。此规则将标签的背景图片更新为“on.png”。

完整示例：

请参阅以下完整代码和演示：

• 要点：http://gist.github.com/592332
• JSFiddle： http://jsfiddle.net/4huzr/

要点：

• 通过将其显示属性设置为“none”来始终隐藏复选框.
• 使用 CSS 选择器语法设置关联标签的样式。
• 使用":checked" 伪类用于区分选中和未选中状态。
• 请记住在标签样式中设置背景图像大小和位置。

以上是如何使用 CSS 将默认复选框替换为自定义图像？的详细内容。更多信息请关注PHP中文网其他相关文章！