我试图使图像显示在单选按钮的选项上方(单选按钮被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>