单选按钮自定义样式未在Firefox上应用

Question

我遇到单选按钮自定义样式的问题。我不想使用用户代理默认样式。我修改了风格，它在Chrome浏览器上工作得非常好，但在Firefox中这种风格并没有应用。

HTML标记

._lc_radio_button{
 background: blue;
 color: white;
 }
 .input_radio{
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 20px;
    width: 20px;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: none;
    outline: none;

    &:after {
        content: "";
        height: 12px;
        width: 12px;
        border-radius: 50%;
        position: relative;
        background-color: white;
        left: 2px;
        top: 2px;
    display: inline-block;
      }
}

这是我的CSS：

* {
  box-sizing: border-box;
}

.container {
  width: 500px;
  height: 800px;
  padding: 50px 100px;
  
  background: #CCC;
}

.content {
  height: 100%;
  background: #FFF;
  overflow: auto;
}

我发现两种浏览器的行为都不同。我为firefox添加了额外的样式属性。

这是工作小提琴。如果你在不同的chrome和firefox浏览器中打开相同的小提琴，看起来就不一样了。我期待在chrome中显示的外观但在firefox中它不适用。

https://jsfiddle.net/rrLptw07/

！[firefox错误] [1]