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

Question

我需要增加单选按钮的大小。它在除 Mozilla Firefox 之外的所有其他浏览器中工作正常。它模糊了单选按钮。

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

将无法获得外线的控制权。有什么办法可以解决这个问题。

创建 fiddler Link (请在mozila中查看)我使用的是Mozilla 47.0.0

Answer 1

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

不要忘记使用 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>