CSS样式化复选框

Question

好的，我在网上看到许多关于使用CSS为复选框设置样式的解决方案，但是我正在寻找更加健壮的东西，想知道是否有人可以帮忙。基本上，我想要 这个解决方案，但是需要能够使用CSS指定颜色覆盖灰色复选框。我需要这个功能，因为我会有不可预测的不同复选框数量，每个需要不同的颜色，并且我不想创建大量不同的图像来处理它们。有人有关于如何实现这一点的想法吗？

- David Savage

---

我希望这在所有浏览器中都能如此简单，而不仅仅是在MobileSafari中。:'( - user142019

Answer 1

我创建了一个透明的png图片，外部是白色的，复选框是部分透明的。我修改了代码，在元素上设置了背景颜色，然后就有了一个有颜色的复选框。

http://i48.tinypic.com/raz13m.jpg（它显示为jpg，但其实是png格式）。

我想展示一个示例，但不知道有没有好的方法展示。有没有什么好的沙盒网站可以用？

当然，这取决于对png的支持。你也可以使用gif来实现类似效果，或者在图像上放置一个半透明的CSS层，并使用gif蒙版来遮挡掉彩色框的渗出。这种方法假定浏览器支持透明度。

我的png方法使用了你提供页面的css和js，做了以下更改：

JS:

    // Changed all instances of '== "styled"' to '.search(...)' 
    // to handle the additional classes needed for the colors (see CSS/HTML below)
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {

    span[a] = document.createElement("span");

            // Added '+ ...' to this line to handle additional classes on the checkbox
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");

CSS：

 .checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; /* Removed padding to eliminate color bleeding around image
       you could make the image wider on the right to get the padding back */
    background: url(checkbox2.png) no-repeat;
    display: block;
    clear: left;
    float: left;
 }

 .green {
    background-color: green;
 }

 .red {
    background-color: red;
 }

 etc...

HTML：

<p><input type="checkbox" name="1" class="styled green"/> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>

希望这有意义。

编辑:

以下是一个jQuery示例，演示了使用复选框的原则：

http://jsfiddle.net/jtbowden/xP2Ns/

- Jeff B

---

太棒了！这看起来就是我要找的。我会试一下并且回复你的！ - David Savage

Answer 2

听起来你已经知道了，但是你上面链接的解决方案实际上是用一个带有图像的span标签替换复选框，以达到“样式化”复选框的效果。

对于大多数浏览器，如IE和Firefox，只使用CSS很难对复选框进行样式化，几乎没有什么选项和支持。

- Banjer

---

这也是我的经验。 - Robert Harvey

是的，我知道他们在做什么。我只是希望能够用图片替换复选框，就像示例中一样，但然后叠加一种颜色在图片上，使其呈现特定颜色的色调，这样我就不必创建大量不同颜色的图片了，如果你能理解我的意思的话。 - David Savage

Answer 3

Jeff B的答案是关于如何编辑该解决方案的正确方式。如果有人需要复制和粘贴，这里是他对解决方案的编辑实现。

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW

- Johnny4000

Answer 4

我发现了一个JavaScript + CSS解决方案，可以在以下平台上使用：Win IE、Win和Mac的Chrome、Safari、Firefox、Opera以及iOS Safari和Chrome。该方案与自定义复选框和单选按钮相关。以下是链接：http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/。

- Sebastian Vox

---

嗨Sebastian，欢迎来到Stackoverflow！感谢您添加这个答案：它看起来很有用。然而，如果您的答案能够多提供一点内容而不仅仅是链接，那就更好了。简要描述解决方案如何工作/使用将大大增强您的答案。 - lonesomeday