将css写入选中复选框的其他方法？答案

【问题标题】：Other ways to write css to checked checkbox?将css写入选中复选框的其他方法？
【发布时间】：2026-02-12 20:15:02
【问题描述】：

请帮忙。一旦我取消选中/选中，这个 CSS 就不起作用了。它只是保留默认负载值。

input[type="checkbox"][checked] + label{}

这个很好，但是我发现它在 IE 上不起作用很奇怪

input[type="checkbox"]:checked+label

【问题讨论】：

input[type="checkbox"][checked] 将在您声明 checked 属性时起作用，而另一个在选中复选框时将起作用，并且它应该在 IE 中起作用，请确保您的 label 是相邻的到checkbox
:checked 伪类仅在 IE9 之后才可用MSDN
请参阅this post 以获取克服 IE 问题的建议
@diceyyyy 如果它回答并帮助您的问题，请接受/投票。我们确实付出了一些努力来回答:)

标签： css

【解决方案1】：

试试下面的css：

input[type="checkbox"]:checked {
  background-color: red;  
}

【讨论】：

这是正确的。但我需要编辑复选框旁边的标签。不是实际的复选框。
然后你可以使用 jquery 或 javascript
@SpiderCode + label 部分适用于定位相邻元素

【解决方案2】：

请注意，这在 IE 6-8 中不起作用，这是后来的功能。但是它可以在 IE9 中使用，只要记住包含一个 doctype，否则它不会。

HTML

<div>
  <input type="checkbox" class="checklabel" />
  <label class="label">Your Label</label>
<div>

CSS

.checklabel:checked + .label {
  color: purple; 
}

只需添加上面选中的 CSS。

【讨论】：

【解决方案3】：

使用

 <input type="checkbox" class="check1" />
<label class="label1">test Label</label>

.check1:checked + .label1 {
  background-color: red;
}

DEMO

【讨论】：

【解决方案4】：

input[type="checkbox"]:checked + label {  }

其他方式：

HTML

<input type="checkbox" class="check1" />
<label class="label1">Your Label</label>

CSS

.check1:checked + .label1 {
  background-color: #ff5819;
}

See demo

伪类 :checked 在 IE 6-8 中不受支持。 (See here) 所以使用 selectivizr http://selectivizr.com/.

selectivizr 是一个 JavaScript 实用程序，它在 Internet Explorer 6-8 中模拟 CSS3 伪类和属性选择器。只需将脚本包含在您的页面中，剩下的工作就交给 selectivizr。

selectivizr的使用

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

【讨论】：