样式自定义复选框没有出现图像

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

但它对我不起作用.我非常感谢人们的帮助!感谢您抽出宝贵时间回答菜鸟的问题!

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>