如果我有一个带有按钮的单选组:
…我怎样才能在选择选项而不是按钮中只显示图像,例如
<label>
display:none
visibility:hidden
使用相邻兄弟选择器定位隐藏收音机旁边的图像 +
+
/ HIDE RADIO / [type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
/ IMAGE STYLES / [type=radio] + img { cursor: pointer; }
/ CHECKED STYLES / [type=radio]:checked + img { outline: 2px solid #f00; }
src="https://via.placeholder.com/40x60/0bf/fff&text=A">
src="https://via.placeholder.com/40x60/b0f/fff&text=B">
不要忘记在标签中添加一个 类 ,并在 CSS 中使用 该类 。
这是使用<i>元素和:after伪的高级版本:
<i>
:after
body{color:#444;font:100%/1.4 sans-serif;} /* CUSTOM RADIO & CHECKBOXES http://stackoverflow.com/a/17541916/383904 */ .rad, .ckb{ cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .rad > input, .ckb > input{ /* HIDE ORG RADIO & CHECKBOX */ position: absolute; opacity: 0; width: 0; height: 0; } /* RADIO & CHECKBOX STYLES */ /* DEFAULT <i> STYLE */ .rad > i, .ckb > i{ display: inline-block; vertical-align: middle; width: 16px; height: 16px; border-radius: 50%; transition: 0.2s; box-shadow: inset 0 0 0 8px #fff; border: 1px solid gray; background: gray; } /* CHECKBOX OVERWRITE STYLES */ .ckb > i { width: 25px; border-radius: 3px; } .rad:hover > i{ /* HOVER <i> STYLE */ box-shadow: inset 0 0 0 3px #fff; background: gray; } .rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */ box-shadow: inset 0 0 0 3px #fff; background: orange; } /* CHECKBOX */ .ckb > input + i:after{ content: ""; display: block; height: 12px; width: 12px; margin: 2px; border-radius: inherit; transition: inherit; background: gray; } .ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */ margin-left: 11px; background: orange; } <label class="rad"> <input type="radio" name="rad1" value="a"> <i></i> Radio 1 </label> <label class="rad"> <input type="radio" name="rad1" value="b" checked> <i></i> Radio 2 </label> <br> <label class="ckb"> <input type="checkbox" name="ckb1" value="a" checked> <i></i> Checkbox 1 </label> <label class="ckb"> <input type="checkbox" name="ckb2" value="b"> <i></i> Checkbox 2 </label>