Mozilla自定义输入无线电不起作用

Question

我有一个自定义输入类型radiobutton但在Firefox中它不起作用。 我需要只使用html和css / scss，而不是jq，因为该项目是使用Vue js制作的。

.intermediary {
  border: solid 1px #f5f5f5;
  background-color: #fd9d00!important;
  [type="radio"]:checked:before,
  [type="radio"]:not(:checked):before {
    background: #fd9d00;
  }
}

.negative {
  border: solid 1px #f5f5f5;
  background-color: #de0707!important;
  [type="radio"]:checked:before,
  [type="radio"]:not(:checked):before {
    background: #de0707;
  }
}

.positive {
  border: solid 1px #f5f5f5;
  background-color: #53bf18!important;
  [type="radio"]:checked:before,
  [type="radio"]:not(:checked):before {
    background: #53bf18;
  }
}

.default {
  border: solid 1px #f5f5f5;
  background-color: #919191;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
}

[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #666;
}

[type="radio"]:checked:before,
[type="radio"]:not(:checked):before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #fff;
}

[type="radio"]:not(:checked):after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transform: scale(0);
}

[type="radio"]:checked:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transform: scale(1);
}

<div class="panel-timeless" v-show='toggle'>
  <div v-tooltip.bottom="'no work'" class="timeless-status positive">
    <input type="radio" name="example" value="positive" @click="login" @change="radio_first = true;radio_second = false;radio_thirst= false">
  </div>
  <div v-tooltip.bottom="'2 weeks'" class="timeless-status negative">
    <input type="radio" name="example" value="negative" @click="login" @change="radio_first = false;radio_second = true;radio_thirst= false">
  </div>
  <div v-tooltip.bottom="'6 month'" class="timeless-status intermediary">
    <input type="radio" name="example" value="intermediary" @click="login" @change="radio_first = false;radio_second = false;radio_thirst= true">
  </div>
</div>

左铬，右火狐