隱藏單選按鈕但顯示僞元素？

Question

我試圖隱藏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元素。

Answer 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

Answer 2

這是預期的行爲。 :before和:after應用於INSIDE元素，因此遵守相同的顯示規則。

我認爲Checkbox Hack可能是您需要的。

CSS-Tricks article

Answer 3

只要改變無線電本身是0像素寬乘高0像素：所以僞元件被示出，但是無線本身是不可見的。

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

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