form?{
??border:?1px?solid?#ccc;
??padding:?20px;
??width:?300px;
??margin:?30px?auto;
}
.wrapper?{
??margin-bottom:?10px;
}
.box?{
??display:?inline-block;
??width:?30px;
??height:?30px;
??margin-right:?10px;
??position:?relative;
??background:?orange;
??vertical-align:?middle;
??border-radius:?100%;
}
.box?input?{
??opacity:?0;
??position:?absolute;
??top:0;
??left:0;
??width:?100%;
??height:100%;
??margin:0;/*增加，解決瀏覽器默認樣式導致點擊范圍偏了*/
}

.box?span?{?
??display:?block;
??width:?10px;
??height:?10px;
??border-radius:?100%;
??position:?absolute;
??background:?#fff;
??top:?50%;
??left:50%;
??margin:?-5px?0??0?-5px;
??
}

input[type="radio"]?+?span?{
??display:none;??/*修改，避免span層處于input層上方，不可點*/
}
input[type="radio"]:checked??+?span?{
??display:block;
}

這樣子改后，用戶體驗會更好