css重写原生radio单选框样式

 众所周知，合同这个东西总是掺杂着很多奇奇怪怪的需求，最近遇到的这个就是需要将checkbox的盒子隐藏起来。
 其实在vue中，我们可以自己重新封装一个checkbox来做到，但是吧问题来了，我们所用的合同都是html，然后v-html给渲染出来的，这就导致一件很尴尬的事情，我们无法使用其他标签来重新定义单选框，由于浏览器的安全机制，我们无法在字符串中添加代码，所以，最简单的方式就是从css的层面解决。
首先要清楚一件事情，单选框的样式是由什么组成，无非就是一个激活状态的样式和一个未激活状态的样式。但是原始样式又很难改动，那么不如另辟蹊径，直接将单选框元素隐藏，当他被选中的时候，创建一个新的标签来代替他显示。那么都隐藏了，我要如何点击他呢，<label>标签起到了关键性的作用。

也就是说，我们点击与单选框相关的label标签时，单选框的状态就会发生改变。当单选框被选中时，我们再定义一波样式，问题就完美的解决了

<label class="check-radio">
   <input type="radio" name="sale" value="option1">
   <span class="checkmark" checked></span>
   <span class="label-text sale" checked>一级经销商</span>
 </label>

.zxcnh .check-radio {
 position: relative;
 cursor: pointer;
 font-size: 16px;
}

.zxcnh .check-radio input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
}

.zxcnh .checkmark {
 position: absolute;
 top: 0;
 left: 0;
 height: 15px;
 width: 15px;
 border: 1px solid #000;
}
.zxcnh .check-radio input:checked ~ .checkmark::after {
 content: '\2713';
 left: -30px;
 top: -13px;
 font-size: 16px;
 font-weight: 700;
 position: absolute;
 border-color: #2196F3;
}

完成效果如下