使用不显示图像的样式自定义复选框答案

【问题标题】：Styling Custom Checkbox with Image Not Appearing使用不显示图像的样式自定义复选框
【发布时间】：2021-10-01 01:36:08
【问题描述】：

我正在尝试 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

但它不适合我。我将非常感谢人们的帮助！感谢您抽出宝贵时间回答菜鸟的问题！

【问题讨论】：

首先你的html是无效的。第二..你能用文件展示你的文件夹结构吗？
你能创建一个工作的 sn-p 吗？

标签： html css

【解决方案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>

【讨论】：

谢谢，这很好用。我也发现了我遇到的问题，显然即使图像在同一个文件夹中，URL 也不会单独接受像“check.png”这样的名称。我不确定是什么让我产生了这样的想法。

【解决方案2】：

你走在正确的道路上。只是您需要将背景图像和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>

【讨论】：

【解决方案3】：

当相邻的兄弟pseudo-state 是:checked 时，您提供的代码没有提供背景label 图像。

您需要考虑这两种状态，例如：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;
}

编辑
您可能还需要声明背景大小属性。

【讨论】：

【解决方案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 类，并在焦点伪类下添加点击效果图像

例如：

.checkmark-section:focus { 背景：url(./checkmark-active)

}

这意味着一旦单击选中标记激活，它将切换到显示按下的选中标记图像。我还没有尝试过，但我希望它会这样工作。

一切顺利，

丹

【讨论】：