Chrome & Opera radio box-shadow 是正方形 - 有什么解决方法吗？

Question

Chrome 和 opera 在单选输入样式中都有错误，因此阴影出现在方框周围，而不是原生元素周围。

火狐：

Chrome & 歌剧：

有谁知道解决这个问题的方法，而不是仅仅移除 chrome 和歌剧的阴影？

Answer 1

将radio 元素包裹在div 中，并将div 的溢出设置为隐藏，并将border-radius 设置为100px。然后设置radio input为display block，并且没有margin。

<div class="radio_contain">
    <input type="radio" id="r1" name="r1">
</div>



.radio_contain {
  display: inline-block;
  border-radius: 100px;
  overflow: hidden;
  padding: 0;
}
.radio_contain input[type="radio"] {
  display: block;
  margin: 0;
}