gpt4 book ai didi

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

转载 作者:bug小助手 更新时间:2023-10-28 10:53:03 25 4
gpt4 key购买 nike

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

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

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

最佳答案

更新:

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

这里有一些有用的链接:

值得注意的是,根本问题没有改变。您仍然不能将样式(边框等)直接应用于复选框元素,并且这些样式会影响 HTML 复选框的显示。然而,改变的是现在可以隐藏实际的复选框并用您自己的样式元素替换它,只使用 CSS。特别是,因为 CSS 现在有一个广泛支持的 :checked 选择器,您可以使您的替换正确反射(reflect)框的选中状态。


老答案

这里是 a useful article about styling checkboxes 。基本上,该作者发现它因浏览器而异,而且许多浏览器总是显示默认复选框,无论您如何设置它。所以真的没有一个简单的方法。

不难想象一种解决方法,您可以使用 JavaScript 在复选框上叠加图像,然后单击该图像会导致真正的复选框被选中。没有 JavaScript 的用户会看到默认复选框。

编辑添加:这里是 a nice script that does this for you ;它隐藏了真正的复选框元素,将其替换为样式跨度,并重定向点击事件。

关于html - 如何使用 CSS 设置复选框的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4148499/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com