Question

请帮助。取消选中/检查后，此CSS无法正常运行。它只保留默认负载值。

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

这个很好但是，我发现它在IE上无法运行很奇怪

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

Answer 1

尝试以下css：

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

Answer 2

使用

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

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

DEMO

Answer 3

请注意，这在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。

Answer 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

IE 6-8中不支持

伪类：已检查。（See here）因此，请使用选择性http://selectivizr.com/。

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

选择性的用法

<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]-->

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

4 个答案: