更改HTML复选框的背景颜色

Question

是否可以更改HTML复选框的背景颜色？如果可以，如何更改？我特指小复选框后面的白色背景。

我已经搜索了很多，但还没有得出确定的答案。

- risingTide

Answer 1

只有使用脚本才能实现跨浏览器的解决方案，这里是一个样式化复选框的示例...

它使用了jQuery UI来改变样式。

- BrunoLM

---

这个例子正是我一直在寻找的。我使用脚本来实现解决方案没有问题。这里有一个后续问题：jQuery是否原生支持此功能，还是需要使用特定的插件？（我尝试搜索插件，但找不到一个合适的；然而，他们的搜索功能并不是很好。） - risingTide

这是一个jQuery UI小部件。我不太清楚如何使用它，曾经有个同事向我展示过一次。这里有一个教程在使用它http://www.tuttoaster.com/enhancing-forms-using-jquery-ui/。 - BrunoLM

是的，我看到你确实包括了一个插件链接。乍一看我以为那只是jQuery链接。感谢你的帮助，也感谢你最新的链接！ - risingTide

Answer 2

我怀疑这是不可能的，因为复选框的外观在不同操作系统上都是不同的（我的复选框有一个带阴影的灰色背景，而不是白色的）。

一个解决方案可以是使用JavaScript和一些图形来构建自己的复选框。

- Udo G

Answer 3

据我所知，只有Opera支持对表单元素使用"background" CSS语句。

如需更多信息，请查看此链接：http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

- abaumg

---

我之前浏览过这个网站，但是信息似乎有点过时了。这里测试的最新浏览器是Windows XP中的IE7。 - risingTide

Answer 4

Jeff B展示了另一种为复选框上色的方法。他还提供了一个jsfiddle示例。

思路是将一个span包裹起来，使用带有一些javascript和css的png图像。

- J punto Marcos

Answer 5

我正在实现颜色复选框，我以为这很容易，但当我开始实现它时，发现这是一项非常耗时的工作。以下是颜色复选框的HTML和CSS代码，任何人都可以根据自己的需要进行自定义。

HTML：

<div class="squaredThree left">
    <input type="checkbox" value="None" id="squaredThree" name="check" />
    <label for="squaredThree"></label>
</div>

CSS：

.squaredThree {
    width: 20px;    
    position: relative;
}

.squaredThree label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    background:#f7f7f7;
    border:1px solid #6d7279;
}

.squaredThree label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 2px;
    left: 2px;
    border: 3px solid #0b9dda;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.squaredThree label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.squaredThree input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

- Novelink