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

カラー オーバーレイを使用した CSS チェックボックスのスタイル設定

CSS を使用してチェックボックスをカスタマイズする際の課題の 1 つは、視覚的な魅力を高めるためにカラー オーバーレイを追加することです。これは、異なる色の複数のチェックボックスが必要な場合に特に困難になる可能性があります。ただし、この問題に対処するために利用できる効果的な解決策があります。

一般的なアプローチには、部分的に透明なチェックボックスを備えた透明な PNG 画像を作成することが含まれます。 CSS の背景色を変更することで、チェックボックスに希望の色を重ねることができます。このメソッドは PNG サポートを必要とし、ブラウザーでの透過サポートを前提としています。

CSS、JavaScript、HTML による実装:

JavaScript:

// Handle additional classes on the checkbox
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {

    span[a] = document.createElement("span");

    // Add additional classes for colors
    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;
 }

.green {
    background-color: green;
 }

.red {
    background-color: red;
 }

HTML:

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

jQuery 例:

ライブ デモンストレーションについては、以下の jQuery の例を参照してください。

http://jsfiddle.net/jtbowden/xP2Ns/

このソリューションは CSS の組み合わせを使用します。 、JavaScript、HTML を使用して、カラー オーバーレイを使用したインタラクティブなチェックボックスのスタイルを実現します。

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