javascript - CSS Html 使图像出现在单选按钮的选项上(单选按钮被 CSS 隐藏)

Question

我试图让图像出现在单选按钮的选项上(单选按钮被 CSS 隐藏)请检查以下 js fiddle

[链接] ( https://jsfiddle.net/testingmilan56/rqr4dt8h/ )

ul {
    list-style: none;
}
li {
    display: inline-block;
    margin-right: 15px;
}
input {
    visibility:hidden;
}
label {
    cursor: pointer;
}
input:checked + label {
    background:#fff000;
}

<ul>
    <li>
        <input type='radio' value='1' name='radio' id='radio1'/>
        <label for='radio1'>Value 1</label>
    </li>
    <li>
        <input type='checkbox' value='2' name='radio'  id='radio2'/>
        <label for='radio2'>Value 2</label>
    </li>
    <li>
        <input type='radio' value='3' name='radio'  id='radio3'/>
        <label for='radio3'>Value 3</label>
    </li>
</ul>

我也想控制图像的位置。我知道它可以用 z-index 来做。请帮忙。需要稍微修改一下。

谢谢

Answer 1

尝试这样的事情，但不要使用边框、框阴影和背景颜色，而是使用背景图像。

.container {
  margin: 32px auto;
}
input {
  display: none;
}
label {
  display: block;
}
input + label:before {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  content: '';
  width: 1em;
  height: 1em;
  box-shadow: 0 0 0 1px black;
  margin-right: 0.25em;
  top: .2em;
}

input:checked + label:before {
  border: 2px solid white;
  background: lime;;
}

input[type=radio] + label:before {
  border-radius: 50%;
}

<div class="container">
  <input type="checkbox" id="check-1" name="check-1" />
  <label for="check-1">Label 1</label>
  <input type="checkbox" id="check-2" name="check-2" />
  <label for="check-2">Label 2</label>
  <input type="checkbox" id="check-3" name="check-3" />
  <label for="check-3">Label 3</label>
  <input type="checkbox" id="check-4" name="check-4" />
  <label for="check-4">Label 4</label>
  <input type="checkbox" id="check-5" name="check-5" />
  <label for="check-5">Label 5</label>

  <hr />

  <input type="radio" id="radio-1" name="radio" />
  <label for="radio-1">label 1</label>
  <input type="radio" id="radio-2" name="radio" />
  <label for="radio-2">label 2</label>
  <input type="radio" id="radio-3" name="radio" />
  <label for="radio-3">label 3</label>
  <input type="radio" id="radio-4" name="radio" />
  <label for="radio-4">label 4</label>
  <input type="radio" id="radio-5" name="radio" />
  <label for="radio-5">label 5</label>
</div>