盒子陰影樣式不應用於Mozilla中的單選按鈕

Question

我已經制作了一個單選按鈕控件，它在Chrome中完美工作，但它不適用於Mozilla。

的HTML：

<input type='radio' class="myRadio" name='a' checked/><span> A</span> 
<br> 
<input type='radio' class="myRadio" name='a'/><span> B</span> 
<br> 
<input type='radio' class="myRadio" name='a'/> <span> C</span> 

的CSS：

input[type='radio'].myRadio { 
    -webkit-appearance:none; 
    width:20px; 
    height:20px; 
    border:1px solid darkgray; 
    border-radius:50%; 
    outline:none; 
    padding:0px; 
    -moz-box-shadow:0 0 5px 0px gray inset; 
    box-shadow:0 0 5px 0px gray inset; 
} 
input[type='radio'].myRadio:hover { 
    box-shadow:0 0 5px 0px orange inset; 
    -moz-box-shadow:0 0 5px 0px orange inset; 
} 
input[type='radio'].myRadio:before { 
    content:''; 
    display:block; 
    width:100%; 
    height:100%; 
    margin: 20% auto;  
    border-radius:50%; 
    margin-top:0px; 

} 
input[type='radio'].myRadio:checked:before { 
    background:orange; 
} 

Here is the jsfiddle

Answer 1

嘗試

-moz-appearance: none; 

顯然，你需要關閉默認的外觀設置，使box-shadow（不需要前綴）工作。

如果檢查用戶代理樣式規則（打開的選項「顯示瀏覽器的樣式」，「督察」下（齒輪）面板），你看

border: 2px inset #F0F0F0 !important; 

的!important這裏迫使這種風格優先於你的，我試圖強制單選按鈕的「原生」外觀。您可能會在舊票中找到一些線索：https://bugzilla.mozilla.org/show_bug.cgi?id=605985。