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>

希望这是有道理的.

这是一个 jQuery 示例，它说明了复选框的原理:

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

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

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