复选框的CSS样式

Question

是否可以在不使用javascripts的情况下设置HTML复选框的样式？例如,此代码适用于IE,但不适用于Firefox或Chrome. http://jsfiddle.net/5wJxF/有 什么建议吗？

Answer 1

是.这是可能的.

你不能直接设置复选框元素的样式,但如果你将一个<label>元素与复选框一起使用,那么你可以实现你想要的效果.

<input type="checkbox" id="field1" class="mycheckbox" />
<label for="field1" class="mycheckbox-label">Label here</label>

然后你的CSS看起来像这样:

.mycheckbox {
  display:none;
}

.mycheckbox + label {
  padding:20px; /*or however wide your graphic is*/
  background:url(/fancy-unchecked.gif) no-repeat left center;
}

.mycheckbox:checked + label {
  background:url(/fancy-checked.gif) no-repeat left center;
}

这是一个工作示例:http://jsfiddle.net/TVaPX/(使用Firefox 5测试)

这种方法的问题在于它只适用于现代浏览器.较旧的浏览器可能不支持CSS选择器:checked或+CSS选择器.但如果你没有支持旧版本的IE,那么这将是有效的.上面的例子在IE8中不起作用(它支持+但不支持:checked).

如果您对此不满意,那么您将不得不坚持使用Javascript解决方案.

但是,使用与此类似的方法,您仍然可以使用非常少量的Javascript代码执行此操作:只需要一个单行JS,在选中时切换复选框的类,并且您可以使用上述所有代码,但是使用备用类名而不是:checked选择器.这将适用于IE7和IE8.

希望有所帮助.

Answer 2

不,这是不可能的.复选框的外观是特定于操作系统和浏览器的.只有基于JavaScript的解决方案才能让您以适合所有浏览器的方式设置样式.

你可能会喜欢这个插件.它易于使用,并给出令人满意的结果.