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

纯 CSS 复选框图像替换

对于您的复选框列表，您的目标是使用 CSS 将默认复选框图像替换为自定义开/关图像.

要实现这一目标，请遵循以下步骤步骤：

1. 隐藏原始复选框：

   • 使用 CSS 显示：无；属性来隐藏本机复选框。

2. 创建自定义标签：

   • 将标签放置在隐藏复选框旁边使用标签输入。
   • 此标签将负责显示您的自定义图片。

3. 使用背景图像设置标签样式：

   • 使用背景图像和输入[type=checkbox ]:检查伪类以在打开和关闭之间切换

4. 正确定位图像：

   • 调整背景位置属性以在图像内正确对齐图像

完整 CSS 代码示例：

input[type=checkbox] {
  display: none; /* Hide the checkbox */
}

input[type=checkbox] + label {
  display: inline-block; /* Position the label next to the checkbox */
  width: 16px; /* Width of the label = Width of the checkboxes */
  height: 16px; /* Height of the label = Height of the checkboxes */
  background-image: url('/images/off.png'); /* Default to "off" image */
  background-position: 0 0;
}

input[type=checkbox]:checked + label {
  background-image: url('/images/on.png'); /* Change image to "on" image when checked */
}

注意： 确保路径您的自定义图像是正确的。请参阅提供的 JavaScript Fiddle 和 Gist 以获取完整的工作示例。

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