增加单选按钮高度会导致Mozilla浏览器出现问题

Question

我需要增加单选按钮的大小。它在除Mozilla Firefox之外的所有其他浏览器中都运行良好。它模糊了单选按钮  

我尝试添加-moz-appearance: none; css属性并设置样式。但它返回以下结果

无法控制外线。有没有办法解决这个问题。

创建小提琴手Link（请在mozila中查看）我使用的是Mozilla 47.0.0

Answer 1

您可以使用纯CSS自定义单选按钮（和复选框），如下所示，可在任何浏览器中使用。您可以根据用户体验进行自定义。如果您的单选按钮具有不同的样式，则可以使用背景图像（用于标签）样式而不是伪元素。

请勿忘记使用id-for组合来分组广播和标签。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;