纯CSS复选框图像替换

  • Z时代
  • 2024-01-10
  • 分类：问答

我在表中有一个复选框列表。（该行中的多个CB之一）

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

我想用一对自定义的开/关图像替换复选框图像，我想知道是否有人对如何使用CSS更好地了解？

我已经找到了这个“ CSS ninja”教程，但是我不得不承认发现它对我来说有点复杂。

据我所知，您可以使用伪类

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

我的期望是，通过添加上述CSS，该复选框至少将默认显示为处于OFF状态的图像，然后添加以下内容以使ON

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

不幸的是，似乎我在某处缺少关键步骤。我尝试使用自定义CSS3选择器语法来匹配我当前的设置-但必须丢失一些内容（如果这很重要，则图像尺寸为16x16）

编辑：我在本教程中丢失了一些内容，在该内容中，他将图像更改应用于标签而不是输入本身。我仍然没有在页面上得到复选框结果的预期交换图像，但是我想离得更近了。

回答：

您已经关闭了。只需确保隐藏复选框，然后将其与您通过样式设置的标签相关联即可input[checkbox] + label

以上是 纯CSS复选框图像替换 的全部内容， 来源链接： utcz.com/qa/404511.html

回到顶部