小编典典

如何使用CSS设置复选框样式

html

我正在尝试使用以下样式设置复选框:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

但是没有应用样式。复选框仍显示其默认样式。如何给它指定的样式?


阅读 572

收藏
2020-05-10

共1个答案

小编典典

更新:

以下答案引用了CSS 3广泛使用之前的状态。在现代浏览器(包括InternetExplorer9和更高版本)中,使用首选样式创建复选框替换更为简单,而无需使用JavaScript。

值得注意的是,基本问题没有改变。您仍然不能直接将样式(边框等)应用于复选框元素,并使这些样式影响HTML复选框的显示。但是,发生的变化是,现在可以隐藏实际的复选框,并用您自己的样式化元素替换它,仅使用CSS。特别是,由于CSS现在具有广泛支持的:checked选择器,因此您可以使其替换正确地反映该框的选中状态。


旧答案

基本上,该作者发现,不同浏览器的浏览器差异很大,并且无论您如何设置其样式,许多浏览器始终显示默认复选框。因此,确实没有一个简单的方法。

不难想象有一种解决方法,您可以使用JavaScript在复选框上覆盖图像,并在该图像上单击以选中实际的复选框。没有JavaScript的用户将看到默认复选框。

2020-05-10