CSS样式复选框

Posted 2023-03-05

【中文标题】CSS样式复选框

【英文标题】：CSS Styling Checkboxes

【发布时间】：2010-12-31 11:48:29

【问题描述】：

好的，我在网上看到了很多通过 CSS 设置复选框样式的解决方案。但是，我正在寻找更强大的东西，我想知道是否有人可以提供帮助。基本上，我想要this solution，但能够让 CSS 指定的颜色覆盖灰色复选框。我需要这个，因为我将拥有不可预测数量的不同复选框，每个复选框都需要不同的颜色，而且我不想创建大量不同的图像来处理这个问题。有人对如何实现这一目标有任何想法吗？

【问题讨论】：

我希望这在所有浏览器中都一样简单，而不仅仅是在 MobileSafari 中：'(

【参考方案1】：

我创建了一个透明的 png，外面是白色的，复选框是部分透明的。我修改了代码，在元素上添加了一个 backgroundColor，瞧！，一个彩色的复选框。

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/

【讨论】：

太棒了！这看起来像我正在寻找的东西。我会试试看，然后回来找你！

【参考方案2】：

听起来您已经知道这一点，但您在上面链接的解决方案实际上将复选框替换为带有图像的 span 标签，以提供“样式化”复选框的效果。

对于大多数浏览器，如 IE 和 Firefox，只有很少的（如果有的话）选项，并且很少支持单独使用 CSS 设置复选框样式。

【讨论】：

这也是我的经验。

是的，我知道他们正在这样做。我只是希望我可以用图像替换复选框，就像在示例中一样，然后在图像上覆盖颜色以将其着色为特定颜色，这样我就不必创建一堆不同颜色的图像，如果这是有道理的。

【参考方案3】：

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

javascripthttp://pastebin.com/WFdKwdCt

CSShttp://pastebin.com/TM1WwSQW

【参考方案4】：

我找到了http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 一个 javascript + css 解决方案，适用于 win ie、win 和 mac：chrome、safari、firefox、opera。 ios Safari 和 chrome。

【讨论】：

嗨塞巴斯蒂安，欢迎来到 ***！感谢您添加此答案：它看起来很有用。但是，如果您的答案不仅仅是链接，那就太好了。对解决方案的工作原理/使用方式的简要说明会大大增加您的答案。