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
さまざまなカラー クラスを定義し、それらを背景色に関連付けます。

HTML:

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

このメソッドは、PNG サポートを前提として、PNG の透明性を利用して目的の効果を実現します。必要に応じて、GIF マスクでオーバーレイされた CSS レイヤーを使用するなど、代替方法を使用できます。

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

以上がCSS を使用してチェックボックスを異なる色のスタイルに設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。