画像が表示されないカスタムチェックボックスのスタイリング

Question

私はHTMLとCSSを試しています。概念全体に比較的新しいものです。私は現在、Photoshopで作成した画像を使用してカスタムチェックボックスのスタイリングを行っています。私はこのように設定したときに私のイメージが表示されない理由を理解できません。

HTML

<ul id="myUL" class="ulChecklist"> 
    <form action="/action_page.php">     
    <li><input type="checkbox" name="instruction"> 
     <label for="Step1">Step 1</label> 
    </li> 
    <li><input type="checkbox" name="instruction"> 
     <label for="Step2">Step 2</label>      
    </li> 
    <li><input type="checkbox" name="instruction"> 
     <label for="Step3">Step 3</label>      
    </li> 
    </form> 
</ul> 

CSS

input[type="checkbox"] { 
opacity: 0; 
} 

input[type="checkbox"] + label { 
background: url(check.png) left center no-repeat; 
} 

これは、私が追加したい事前にチェック画像です。

これは、追加したいポストチェックされた画像です。

ご覧のとおり、表示されていません。

これらのコードの書き方に何か問題がありますか？私は次のLyndaコースのリンクを確認しました：https://www.lynda.com/HTML-tutorials/Styling-radio-buttons-check-boxes-images/612196/646907-4.html

しかし、それは私のために働いていません。私は大いに人々の助けに感謝します！ noobの質問にお答えする時間を取ってくれてありがとう！

Answer 1

これを試してください。

ul{ 
 
    list-style:none; 
 
} 
 
input[type="checkbox"] { 
 
    opacity: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
} 
 

 
input[type="checkbox"] + label { 
 
    background: url(https://i.stack.imgur.com/eiFBl.png) no-repeat 0 center; 
 
    padding-left:60px; 
 
    line-height:50px; 
 
    display: inline-block; 
 
    cursor:pointer; 
 
} 
 
input[type="checkbox"]:checked + label { 
 
    background: url(https://i.stack.imgur.com/mCst2.png) no-repeat 0 center; 
 
} 
 
.check-wrap{ 
 
    position:relative; 
 
    display: inline-block; 
 
}

<ul id="myUL" class="ulChecklist"> 
 
    <form action="/action_page.php"> 
 
    <li> 
 
     <div class="check-wrap"> 
 
     <input type="checkbox" name="instruction" id="Step1"> 
 
     <label for="Step1">Step 1</label> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="check-wrap"> 
 
     <input type="checkbox" name="instruction" id="Step2"> 
 
     <label for="Step2">Step 2</label> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="check-wrap"> 
 
     <input type="checkbox" name="instruction" id="Step3"> 
 
     <label for="Step3">Step 3</label> 
 
     </div> 
 
    </li> 
 
    </form> 
 
</ul>

Answer 2

私はメンバーではありませんけど、これに答えるために最善を尽くしますようリンダのコースを見ることはできないです申し訳ありません。

私は、私はあなたのコードを以下のように変更になるだろう設定した場合：次にCSSで私はチェックマーク・セクションのクラスをコールアウトだろうとの疑似クラスの下クリック効果画像に追加

<ul id="myUL" class="ulChecklist"> 
    <form action="/action_page.php">     
    <li><input type="checkbox" name="instruction"> 
     <label for="Step1">Step 1</label> 
     <img src=“./check.png” class=“checkmark-section”> 
    </li> 
    </form> 
</ul> 

をフォーカス<これはクリックされたCSSの単語です。例えば

：

.checkmarkセクション：フォーカス{ 背景：URL（./チェックマーク活性）

}

これはチェックマーク活性回がクリックされたことを意味し、それは代わりにチェックマークの画像が表示されます。私はこれを試していないが、それは私がそれが動作することを期待する方法です。

すべてのベスト、

あなたは正しい道にあるダン・

Answer 3

。ちょうどあなたは背景画像のサイズを変更する必要があり、floatそれを左にします。そして、最も重要な部分の一つはforとidで入力チェックボックスとラベルを関連付けることである。

input[type="checkbox"] { 
 
opacity: 0; 
 
} 
 

 
input[type="checkbox"] + label { 
 
background: url(http://www.iconarchive.com/download/i86039/graphicloads/100-flat-2/check-1.ico) left center no-repeat; 
 
float: left; 
 
padding-left: 25px; /*image width plus extra padding */ 
 
background-size: 20px 20px; 
 
} 
 

 
input[type="checkbox"]:checked + label { 
 
background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/2181-200.png) left center no-repeat; 
 
float: left; 
 
padding-left: 25px; /*image width plus extra padding */ 
 
background-size: 20px 20px; 
 
}

<ul id="myUL" class="ulChecklist"> 
 
    <form action="/action_page.php">     
 
    <li><input id="Step1" type="checkbox" name="instruction"> 
 
     <label for="Step1">Step 1</label> 
 
    </li> 
 
    <li><input id="Step2" type="checkbox" name="instruction"> 
 
     <label for="Step2">Step 2</label>      
 
    </li> 
 
    <li><input id="Step3" type="checkbox" name="instruction"> 
 
     <label for="Step3">Step 3</label>      
 
    </li> 
 
    </form> 
 
</ul>

Answer 4

時に隣接あなたが提供したコードは、背景label画像のための提供を行うものではありません兄弟pseudo-stateは:checkedです。

あなたは、例えば両方の状態を考慮して、必要があります：input[type="checkbox"]&input[type="checkbox"]:checked

input[type="checkbox"] + label { 
background: url(check.png) left center no-repeat; 
} 

input[type="checkbox"]:checked + label { 
background: url(check-alt.png) left center no-repeat; 
} 

編集
ます。また、バックグラウンドのサイズのプロパティを宣言する必要があるかもしれません。