0

我试图隐藏一个radio-button并使用:before来创建一个自定义的。

这是我的CSS：

input[type=radio]{
    display: none;  
}

input[type=radio]:before{
    content: "";
    display: inline-block;  

    width: 19px;
    height: 19px;
    margin-bottom: 0;
    border: 1px solid #ddd;
}

我希望这会产生一个空的正方形。问题似乎是当我应用display: none到我的输入时，这也会影响:before元素。

4

3 回答 3

1

只需将收音机本身更改为 0px 宽 x 0px 高：这样会显示伪元素，但收音机本身不可见。

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

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

于 2013-09-25T11:23:19.080 回答
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>

现场演示

于 2013-09-25T11:28:03.663 回答
0

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

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

CSS 技巧文章

于 2013-09-25T11:20:51.727 回答