有没有一种方法可以使用纯CSS来设置复选框或单选按钮的样式，即使用类？

Question

有没有一种方法可以使用纯CSS来设置复选框或单选按钮的样式，即没有jQuery的class =“ newstyle”？ 我一直在网上搜索，我想知道是否有一种方法可以仅使用class =“”属性来实现。 这是一个示例： http : //www.filamentgroup.com/examples/customInput/

编辑：我目前的实现方式：

<div class="styled-checkbox">
 <input type="checkbox" id="checkbox1" value="1" />
 <label for="checkbox1"><span></span>Test</label>
</div>

但是，从兼容性的角度来看，不确定这是否是实现此目标的正确方法，此外，默认情况下，div需要预设宽度，如果为auto，它将自动填充DOM。

Answer 1

您只需要一个类就可以实现所需的效果，但是说出您要设置复选框的样式是错误的，因为不能直接通过CSS设置样式。 这是因为该组件是由操作系统而不是浏览器本身控制的。

解决方法是使用一组普通元素来模拟复选框的外观。

在您提供的链接的特定示例中，该复选框完全隐藏，因为它通过z-index保留在标签的后面，该标签的背景包含改进的复选框图形版本。 有，如果你使用的事实相结合id \\ for属性对为复选框和标签，同时单击标签（它显示一个复选框的图像）的复选框将改变它的选中/取消选中状态。