我试图使图像显示在单选按钮的选项上方(单选按钮被CSS隐藏)
PL检查以下js小提琴

[链接](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有关。请帮助。需要稍作修改。

谢谢

最佳答案

尝试类似的方法,但不要使用边框,框阴影和背景颜色,而要使用背景图像。



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

07-24 09:48
查看更多