CSS样式复选框 [英] CSS Styling Checkboxes

问题描述

好吧，所以我已经通过CSS在网络上看到了很多针对样式复选框的解决方案。然而，我正在寻找更健壮的东西，我想知道是否有人可以帮助。基本上，我想拥有此解决方案，但具有能力使CSS指定的颜色覆盖一个灰色复选框。我需要这个，因为我会有不可预测的数量的不同的复选框，每个需要不同的颜色，我不想创建大量不同的图像来处理这个。

Okay, so I've seen lots of solutions for styling checkboxes via CSS on the web. However, I'm looking for something slightly more robust, and I'm wondering if someone can help. Basically, I want to have this solution, but with the ability to have a CSS-specified color overlaying a gray checkbox. I need this because I will have unpredictable numbers of different checkboxes, each needing a different color, and I don't want to create vast amounts of different images to handle this. Anyone have any ideas on how to achieve this?

推荐答案

我创建了一个透明的png，外部是白色的，是部分透明的。我修改了代码，在元素上放了一个backgroundColor，并且是一个彩色复选框。

I created a transparent png, where the outside is white, and the checkbox is partially transparent. I modified the code to put a backgroundColor on the element, and voila!, a colorized checkbox.

http://i48.tinypic.com/raz13m.jpg （它说的是jpg，但它是一个png）。

http://i48.tinypic.com/raz13m.jpg (It says jpg, but it's a png).

我会发布的例子，但我不知道一个好的方法来显示它。任何好的沙箱网站在那里？

I would post the example, but I don't know of a good way to show it. Any good sandbox sites out there?

这当然，取决于png支持。你可能很难用gif这样做，或者像图像一样半透明css图像，像你建议，然后使用一个gif掩码来掩盖彩色框的流血。此方法假定透明度支持。

This, of course, depends on png support. You could poorly do this with gif, or put a semi-transparent css layer over the image, like you suggested, and then use a gif mask to mask out the bleed of the colored box. This method assumes transparency support.

我的png方法使用您链接到的页面的css，js，并进行以下更改：

My png method uses the css, js from the page you linked to, with these changes:

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>

希望有意义。

strong>编辑：

下面是一个jQuery示例，用复选框说明原则：

Here is a jQuery example that illustrates the principle with checkboxes:

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

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