堅牢なスタイリング ソリューションのために CSS カラーをグレーのチェックボックスにオーバーレイするにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-11-07 00:17:03
オリジナル
660 人が閲覧しました

How Can I Overlay CSS Colors onto Gray Checkboxes for a Robust Styling Solution?

CSS を使用したチェックボックスのスタイリング: 堅牢なソリューション

チェックボックスにはさまざまな CSS スタイリング手法が存在しますが、この調査では、次のようなより堅牢なアプローチを模索しています。 CSS で定義された色のグレーのチェックボックスへのオーバーレイ。これは、それぞれに固有の色を必要とする予測不可能な数のチェックボックスを扱う場合に特に便利で、大量の画像を作成する必要がなくなります。

この解決策には、外側が白で、チェックボックスは部分的に透明です。この画像は、CSS の背景色を使用してチェックボックスにオーバーレイされ、色付きのチェックボックスが作成されます。

このアプローチを実装するには、次の CSS、JS、HTML の変更が必要です:

JS:

// Change all instances of '== "styled"' to '.search(...)' to handle additional classes
if ((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {
    span[a] = document.createElement("span");
    // Add '+ ...' to handle additional classes on the checkbox
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");
}
ログイン後にコピー

CSS:

.checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; // Removes padding to eliminate color bleeding around image
    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" class="styled green" /> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>
ログイン後にコピー

このアプローチでは、透明な画像を CSS の背景色でオーバーレイする原理を利用して、色付きのチェックボックスを実現します。多数の画像を必要とせずに、チェックボックスをさまざまな色で動的にスタイル設定するための堅牢なソリューションを提供します。

以上が堅牢なスタイリング ソリューションのために CSS カラーをグレーのチェックボックスにオーバーレイするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!