縮放單選按鈕

Question

我需要縮放單選按鈕的幫助。 Chrome和IE11使用變換，比例工作正常。然而，Firefox的邊界模糊，看起來很可怕。任何幫助將是偉大的！

p { float: left; margin: 5px } 
 

 
    input { 
 
     -moz-transform: scale(1.6, 1.6); 
 
     -ms-transform: scale(1.6, 1.6); 
 
     -o-transform: scale(1.6, 1.6); 
 
     -webkit-transform: scale(1.6, 1.6); 
 
     transform: scale(1.6, 1.6); 
 
    }

<p><input type="radio" name="foo"></p> 
 
    <p><input type="radio" name="foo"></p>

http://jsfiddle.net/applesElmi/ueafvmcx/

謝謝！

Answer 1

不同的Web瀏覽器有不同的渲染引擎和解析方法......如果你希望它在FF上工作，請不要使用scale ...嘗試一種不同的方法或等待FF更新來解決這個問題。

在這裏，你對如何定製複選框/單選按鈕一個很好的教程：http://www.hongkiat.com/blog/css3-checkbox-radio/

HTML

<div class="radio"> 
    <input id="male" type="radio" name="gender" value="male"> 
    <label for="male">Male</label> 
    <input id="female" type="radio" name="gender" value="female"> 
    <label for="female">Female</label> 
</div> 

CSS

label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 25px; 
    margin-right: 15px; 
    font-size: 13px; 
} 

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


label:before { 
    content: ""; 
    display: inline-block; 

    width: 16px; 
    height: 16px; 

    margin-right: 10px; 
    position: absolute; 
    left: 0; 
    bottombottom: 1px; 
    background-color: #aaa; 
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
}