问题

可以在不使用javascript的情况下对HTML复选框进行样式化吗? 例如,此代码可以在IE上正常工作,但不能在Firefox或Chrome上运行. http://jsfiddle.net/5wJxF/ 任何建议?



解决方法

YES. 可能.

您不能直接对复选框元素进行样式,但如果您使用< 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进行测试)

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

如果您不舒服,那么您将不得不坚持使用Javascript解决方案.

然而,使用类似于此的方法,您仍然可以使用非常少量的JavaScript代码来执行此操作:只需使用一行JS即可在检查时切换复选框的类,您可以使用上述所有内容代码,但使用替代类名,而不是:checked 选择器.这将在IE7和IE8中工作.

希望有帮助.




相关问题推荐