チェックボックスの背景画像を使用する

Question

私はいくつかのチェックボックスを設定しようとしていますが、チェックされていないときには、私が持っている画像を使用し、チェックしたら別の画像を使用します。現在のチェックボックスは次のとおりです。

各チェックボックスの背景イメージを設定するために、次のCSSも使用します。

input[type=checkbox][name=fordCheckBox] { 
     background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat; 
     height: 25px; 
     width: 25px; 
     background-size: 50%; 
    } 

    input[type=checkbox][name=fordCheckBox]:checked { 
     background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat; 
     height: 25px; 
     width: 25px; 
     background-size: 50%; 
    } 

あなたは私のJSFiddle exampleアイコンで見ることができるように、正しいサイズですが、それがあるべきように、背景画像を設定することはありませんです。助言がありますか？

Answer 1

あなたがラベル

input[type=checkbox] { 
    display:none; 
} 

input[type=checkbox] + label { 
    display:inline-block; 
    padding: 0 0 0 0px; 
    background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat; 
    height: 125px; 
    width: 125px;; 
    background-size: 50%; 
} 

input[type=checkbox]:checked + label { 
    background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat; 
    height: 125px; 
    width: 125px; 
    display:inline-block; 
    background-size: 50%; 
} 

でそれを単に行うことができますあなたのセレクタは次のようになります。

Htmlの

<input type="checkbox" name="fordCheckBox" id="Ford" value="Ford"> 
<label for="Ford"></label> 

updatet jsfiddleをご確認ください https://jsfiddle.net/malithmcr/vbwgweso/

Answer 2

実際にチェックボックスを直接変更しないでください。一部のブラウザでは常にデフォルトのチェックボックスが表示されます。通常は、入力IDフィールドにリンクされているチェックボックスのラベルを追加します。たとえば：

<input type='checkbox' id='x' name='fordCheckBox'> 
<label for='x'></label> 

は、その後、あなたはdisplay: noneにあなたのチェックボックスを設定し、実際のCSSのではなく、ラベルに適用されます。私はすべてを説明し、ステップバイステップでそれを説明します。この記事を見つけたinput[type=checkbox]:checked + label

：

http://webdesign.tutsplus.com/tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953