增強複選框的 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 /