web-dev-qa-db-ja.com

CSSスタイリングチェックボックス

さて、Web上のCSSを介してチェックボックスをスタイリングするための多くのソリューションを見てきました。しかし、私はもう少し堅牢なものを探していて、誰かが助けてくれるかどうか疑問に思っています。基本的に、 このソリューション にしたいのですが、CSSで指定した色を灰色のチェックボックスに重ねることができます。予測不可能な数の異なるチェックボックスがあり、それぞれに異なる色が必要であり、これを処理するために膨大な量の異なる画像を作成したくないため、これが必要です。誰もこれを達成する方法についてのアイデアを持っていますか？

csscheckbox
20
David Savage

透明なpngを作成しました。外側は白で、チェックボックスは部分的に透明です。要素にbackgroundColorを配置するようにコードを変更し、カラー化されたチェックボックスを作成しました。

http://i48.tinypic.com/raz13m.jpg （jpgと書かれていますが、pngです）。

私は例を投稿しますが、それを示す良い方法がわかりません。良いサンドボックスサイトはありますか？

もちろん、これはpngサポートに依存しています。あなたはこれをgifでうまくやらないか、提案したように画像の上に半透明のcssレイヤーを置き、gifマスクを使用して色付きのボックスのにじみをマスクすることができます。このメソッドは、透過性のサポートを前提としています。

私のpngメソッドは、リンクしたページのcss、jsを使用しますが、次の変更があります。

JS：

    // Changed all instances of '== "styled"' to '.search(...)' 
    // to handle the additional classes needed for the colors (see CSS/HTML below)
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {

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

            // Added '+ ...' to this line 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; /* Removed padding to eliminate color bleeding around image
       you could make the image wider on the right to get the padding back */
    background: url(checkbox2.png) no-repeat;
    display: block;
    clear: left;
    float: left;
 }

 .green {
    background-color: green;
 }

 .red {
    background-color: red;
 }

 etc...

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>

それが理にかなっていることを願っています。

編集：

チェックボックスを使用した原理を示すjQueryの例を次に示します。

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

31
Jeff B

既にこれを知っているように聞こえますが、上記でリンクしたソリューションでは、実際にチェックボックスをspanタグと画像付きの「スタイル」チェックボックスの効果を与える画像に置き換えます。

IEやFirefoxなど）のほとんどのブラウザでは、CSSのみでチェックボックスをスタイリングするためのオプションはほとんどありません（存在する場合）。

6
Banjer

上記のソリューションを編集する方法に関するジェフBの答えは正しいです。誰かがコピーして貼り付ける必要がある場合の、ソリューションに対する彼の編集の実装を次に示します。

JavaScript http://Pastebin.com/WFdKwdCt

CSS http://Pastebin.com/TM1WwSQW

3
Johnny4000

私が見つけた http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 勝利、つまり勝利とマック：クロム、サファリ、 firefox、オペラ。 iOS Safariおよびchrome。

2
Sebastian Vox