チェックボックスの 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 の透明性を利用して目的の効果を実現します。必要に応じて、GIF マスクでオーバーレイされた CSS レイヤーを使用するなど、代替方法を使用できます。

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