隐藏radiobutton但显示伪元素?

时间:2013-09-25 11:16:03

标签: css css3

我正在尝试隐藏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}}元素。

3 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:1)

试试这个

<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

答案 2 :(得分:0)

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

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

CSS-Tricks article