CSS を使用してカスタム カラー オーバーレイでチェックボックスのスタイルを設定する方法

オーバーレイされた色によるチェックボックスの CSS スタイル設定

はじめに

CSS を使用したチェックボックスのスタイル設定は、特に必要な場合に困難になることがあります。複数の画像を作成せずに、各チェックボックスに異なる色を適用します。この記事では、カスタム カラー オーバーレイを使用してチェックボックスの堅牢な CSS スタイルを可能にするソリューションについて説明します。

ソリューション

このソリューションでは、チェックボックスの背景として透明な PNG 画像を使用します。画像には白い輪郭と部分的に透明なチェックボックスの形状が含まれています。 CSS 経由で要素に背景色を追加すると、白い輪郭に影響を与えることなく、チェックボックスに簡単に色を付けることができます。

実装

このソリューションを実装するには、次の手順に従います。 :

• 白い輪郭と半透明のチェックボックス形状を持つ透明な PNG 画像を作成します。
• カラー オーバーレイを処理するために次の CSS コードを追加します:

.checkbox {
  background-color: green;
}

HTML を変更して、次のクラスをチェックボックスに追加します。

<input type="checkbox" name="1" class="checkbox checkbox--green">

その他の考慮事項

PNG メソッドは、ユーザーのブラウザ。 PNG をサポートしていないブラウザの場合は、画像の上に半透明の CSS レイヤーを作成するか、gif マスクを使用できます。

例

これは jQuery の例です。これはこの原則を示しています。

$("input[type=checkbox]").each(function() {
  var color = $(this).attr("data-color");
  $(this).css("background-color", color);
});

結論

このソリューションは、複数の画像を作成せずに、CSS を使用してカスタム カラー オーバーレイでチェックボックスのスタイルを設定する堅牢な方法を提供します。白い輪郭と部分的に透明なチェックボックス形状を備えた透過 PNG 画像を使用すると、希望する美しさを簡単に実現できます。

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