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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

更新：

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

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

旧答案

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

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

以上是 如何使用CSS设置复选框样式 的全部内容， 来源链接： utcz.com/qa/413632.html

回到顶部