如何使用 CSS 設定不同顏色的複選框樣式？

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

CSS：

CSS：

<p><input type="checkbox" name="1">

CSS：
其他CSS

定義不同的顏色類別並將它們與背景顏色相關聯。 HTML:此方法利用 PNG 透明度來達到所需的效果（假設 PNG 支援）。如有必要，可以採用替代方法，例如使用 CSS 圖層疊加 GIF 遮罩。 範例 (jQuery):https://jsfiddle.net/jtbowden/xP2Ns /

以上是如何使用 CSS 設定不同顏色的複選框樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！