隐藏radiobutton但显示伪元素？

Question

我正在尝试隐藏radio-button并使用:before创建自定义的input[type=radio]{ display: none; } input[type=radio]:before{ content: ""; display: inline-block; width: 19px; height: 19px; margin-bottom: 0; border: 1px solid #ddd; } 。

这是我的CSS：

display: none

我希望这会生成一个空方块。问题似乎是当我将:before应用于我的输入时，这也会影响{{1}}元素。

Answer 1

只需将无线电本身更改为0px宽，高度为0px：因此显示伪元素，但无线电本身不可见。

input[type=radio]{ width:0; height:0;}

示例http://jsbin.com/AYIGuyi/1/edit

Answer 2

试试这个

<input type="radio" id="r1" name = "r1" class="rdb" style="visibility:hidden" />
<label for="r1">Male</label>
<input type="radio" id="r2" name = "r2" class="rdb" style="visibility:hidden" />
<label for="r2">Female</label>

Live Demo

Answer 3

这是预期的行为。 :before和:after应用于INSIDE元素，因此遵循相同的显示规则。

我认为Checkbox Hack可能就是您所需要的。

CSS-Tricks article