如何使用 CSS 设置复选框样式
P粉252116587
2023-08-23 12:39:36
<p>我正在尝试使用以下内容设置复选框的样式:</p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /></pre>
<p><br /></p>
<p>但该样式未应用。该复选框仍显示其默认样式。如何给它指定的样式?</p>
通过使用
:after
和:before
伪类附带的新功能,您可以实现非常酷的自定义复选框效果。这样做的优点是:您不需要向 DOM 添加任何其他内容,只需添加标准复选框即可。请注意,这仅适用于兼容的浏览器。我相信这与某些浏览器不允许您在输入元素上设置
:after
和:before
有关。不幸的是,这意味着目前仅支持 WebKit 浏览器。 Firefox + Internet Explorer 仍然允许复选框发挥作用,只是没有样式,这有望在未来发生变化(代码不使用供应商前缀)。这只是一个 WebKit 浏览器解决方案(Chrome、Safari、移动浏览器)
查看示例 Fiddle
额外的 Webkit 风格翻转小提琴
更新:
下面的答案参考了 CSS 3 广泛使用之前的情况。在现代浏览器(包括 Internet Explorer 9 及更高版本)中,使用您喜欢的样式创建复选框替换更加简单,无需使用 JavaScript。
以下是一些有用的链接:
值得注意的是,根本问题没有改变。您仍然无法将样式(边框等)直接应用于复选框元素并使这些样式影响 HTML 复选框的显示。然而,发生的变化是,现在可以隐藏实际的复选框并将其替换为您自己的样式元素,只使用 CSS 即可。特别是,由于 CSS 现在具有广泛支持的
:checked
选择器,因此您可以使替换正确反映框的选中状态。旧答案
这是一篇关于样式化复选框的有用文章。基本上,该作者发现它在不同浏览器之间存在巨大差异,并且无论您如何设计它,许多浏览器总是显示默认复选框。所以确实没有一个简单的方法。
不难想象一种解决方法,您可以使用 JavaScript 在复选框上覆盖图像,然后单击该图像导致检查真正的复选框。没有 JavaScript 的用户将看到默认复选框。
编辑添加:这里是一个很好的脚本,可以为您完成此操作;它隐藏了真正的复选框元素,用样式化的范围替换它,并重定向点击事件。