增强复选框的 CSS 样式

在线存在许多使用 CSS 样式化复选框的解决方案。但是，如果您需要更大的灵活性并能够将不同的颜色应用于各个复选框，请考虑以下方法：

要求：
自定义具有各种颜色的复选框，而无需创建大量图像。

解决方案：
利用具有白色外部和部分透明复选框的透明 PNG 图像。将 CSS 指定的背景颜色应用于 HTML 元素，从而在复选框上产生颜色叠加。

代码：
JavaScript：

// Check for checkbox and apply CSS classes
if (inputs[a].type == "checkbox" || inputs[a].type == "radio" && inputs[a].className.search(/^styled/) != -1) {
  span[a] = document.createElement("span");
  span[a].className = inputs[a].type   inputs[a].className.replace(/^styled/, "");
}

CSS:

.checkbox, .radio {
  width: 19px;
  height: 25px;
  padding: 0px;
  background: url(checkbox2.png) no-repeat;
  display: block;
  clear: left;
  float: left;
}

附加 CSS
定义不同的颜色类别并将它们与背景颜色相关联。

HTML:

此方法利用 PNG 透明度来实现所需的效果（假设 PNG 支持）。如有必要，可以采用替代方法，例如使用 CSS 图层覆盖 GIF 蒙版。

示例 (jQuery):
https://jsfiddle.net/jtbowden/xP2Ns /