在Mozilla瀏覽器中增加單選按鈕高度問題

我需要增加單選按鈕的大小。在除Mozilla Firefox之外的所有其他瀏覽器中工作正常。它模糊了單選按鈕。
在Mozilla瀏覽器中增加單選按鈕高度問題

我試着添加-moz-appearance: none; css屬性和樣式它。但它返回下面的結果

將無法獲得外線的控制。有沒有辦法解決這個問題。

創建提琴手Link使用純CSS如下其工作在任何瀏覽器（請檢查在mozila）我使用Mozilla 47.0.0

來源

2017-05-23 Praveen M P

在我的機器，火狐53.0.3不能擴展的單選按鈕。增加'width'和'height'只會增加單選按鈕周圍的空白。 – Pharaoh

您可以使用css製作自定義廣播。 – LKG

您可以自定義單選按鈕（和複選框）。您可以根據您的UX進行自定義。如果您的單選按鈕風格不同，則可以使用背景圖像（用於標籤）樣式而不是僞元素。

不要忘記使用id-for組合來對收音機和標籤進行分組。

input[type="radio"]{ 
 
    display:none; 
 
} 
 
input[type="radio"]+label{ 
 
    position:relative; 
 
    margin-right:10px; 
 
} 
 
input[type="radio"]+label::before{ 
 
    content:''; 
 
    display:inline-block; 
 
    width:14px; 
 
    height:14px; 
 
    vertical-align:middle; 
 
    border:1px solid #545454; 
 
    border-radius:100%; 
 
    margin-right:4px; 
 
} 
 
input[type="radio"]:checked +label::after{ 
 
    content:''; 
 
    position:absolute; 
 
    width:10px; 
 
    height:10px; 
 
    background:#545454; 
 
    border-radius:100%; 
 
    left:3px; 
 
    top:5px; 
 
}

<input type="radio" name="radio-set" id="radio1"/> 
 
<label for="radio1">Option 1</label> 
 
<input type="radio" name="radio-set" id="radio2"/> 
 
<label for="radio2">Option 2</label>

來源

2017-05-23 09:43:57 Ranga

在Mozilla瀏覽器中增加單選按鈕高度問題

回答

相關問題