Question

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

Answer 1

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。

希望有所帮助。

Answer 2

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

您可能会喜欢this plugin。它易于使用，并提供令人满意的结果。

Answer 3

你可以使用CSS3（仅限Chrome或Safari）来设置它的风格，但对于任何事情都是如此 - 没有其他方式可以使用js。

此处有40多个示例：FORMS ENHANCEMENTS DEMOS

有一些插件 - 我以前使用jNice - 不仅仅是现代浏览器的纯CSS3和其他任何标准的复选框/下拉列表。

最诚挚的问候，

皮特

复选框的CSS样式

3 个答案: