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

试试这个。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

你走在正确的道路上。只需要调整背景图像的大小，然后将float调整到左侧。其中一个最重要的部分是将标签与带有for和id的输入复选框相关联：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 3

当相邻的兄弟label为pseudo-state时，您提供的代码未对背景:checked图片做出规定。

您需要考虑这两种状态，例如：input[type="checkbox"] ＆amp; 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;
}

修改
您可能还需要声明背景大小属性。

Answer 4

抱歉，我无法查看Lynda课程，因为我不是会员，但我会尽力回答这个问题。

如果我正在设置，我会对您的代码进行以下更改：

<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-section类并在伪类焦点下添加点击效果图像＆lt;这是点击的css字。

例如：

.checkmark-section：focus { background：url（./ checkmark-active）

}

这意味着一旦点击了checkmark-active，它将交换以显示郁闷的复选标记图像。我没有试过这个，但这就是我期望它发挥作用的方式。

一切顺利，

丹

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

4 个答案: