如何使用CSS样式复选框？ [英] How to style checkbox using CSS?

问题描述

我尝试使用以下样式复选框：

 < input type =checkboxstyle = 2px dotted＃00f; display：block; background：＃ff0000; /> 
  

但是，它仍显示默认复选框。如何做？

解决方案

更新：
以下答案引用了CSS3广泛可用之前的状态。在现代浏览器（包括Internet Explorer 9和更高版本）中，使用您首选的样式创建复选框更换更为简单，而不使用javascript。

以下是一些有用的链接： / p>

• Easy CSS3复选框和单选按钮


• 从CSSDeck收集复选框样式


• 使用Just CSS创建自定义表单复选框


• 轻松CSS复选框生成器


• 使用复选框黑客可以做的事情


• 使用CSS3实现自定义复选框和单选按钮


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

值得注意的是，根本问题没有改变。您仍然无法直接对checkbox元素应用样式（边框等），并且这些样式会影响HTML复选框的显示。然而，改变的是，现在可以隐藏实际的复选框，并替换为你自己的样式化元素，只使用CSS。特别是，由于CSS现在有广泛支持的：checked 选择器，您可以使您的替换正确地反映框的选中状态。

---

OLDER ANSWER

以下是一个关于样式复选框的实用文章。基本上，作家发现，它从浏览器到浏览器变化巨大，并且许多浏览器总是显示默认的复选框，无论你的风格。所以这真的不是一个简单的方法。

不难想象一个解决方法，你会使用javascript来覆盖一个图像的复选框，并点击该图像导致选中真实复选框。没有javascript的用户将看到默认复选框。

已编辑添加：一个很好的脚本，为你做这个;它隐藏了实际的checkbox元素，将其替换为样式化的span，并重定向点击事件。

I am trying to style checkbox using the following:

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

But, it is still displaying the default checkbox. How to do it?

解决方案

UPDATE: The below answer references the state of things before widespread availability of CSS3. In modern browsers (including Internet Explorer 9 and later) it is more straightforward to create checkbox replacements with your preferred styling, without using javascript.

Here are some useful links:

• Easy CSS3 Checkboxes and Radio Buttons
• Collection of checkbox styles from CSSDeck
• Creating Custom Form Checkboxes with Just CSS
• Easy CSS Checkbox Generator
• Stuff You Can Do With The Checkbox Hack
• Implementing Custom Checkboxes and Radio Buttons with CSS3
• How to Style a Checkbox With CSS

It is worth noting that the fundamental issue has not changed. You still can't apply styles (borders, etc.) directly to the checkbox element and have those styles affect the display of the HTML checkbox. What has changed, however, is that it's now possible to hide the actual checkbox and replace it with a styled element of your own, using nothing but CSS. In particular, because CSS now has a widely supported :checked selector, you can make your replacement correctly reflect the checked status of the box.

---

OLDER ANSWER

Here's a useful article about styling checkboxes. Basically what that writer found was that it varies tremendously from browser to browser, and that many browsers always display the default checkbox no matter how you style it. So there really isn't an easy way.

It's not hard to imagine a workaround where you would use javascript to overlay an image on the checkbox and have clicks on that image cause the real checkbox to be checked. Users without javascript would see the default checkbox.

Edited to add: here's a nice script that does this for you; it hides the real checkbox element, replaces it with a styled span, and redirects the click events.

这篇关于如何使用CSS样式复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！