更改表单单选按钮默认样式

前言：

　　需要修改表单当中自带的单选或者复选框样式

思路：

　　1、隐藏自带样式

　　2、添加需求样式

知识点：

　　:checked 选择器匹配每个选中的输入元素

HTML：

<div>
    <input type="radio" id="radio1" name="product" value="Animal Feed Production">
    <label for="radio1">Animal Feed Production(Pellet/Powder/Mash Feed)</label>
</div>
<div>
    <input type="radio" id="radio2" name="product" value="Biomass Wood Pellet Production">
    <label for="radio2">Biomass Wood Pellet Production(Agricultural And Forestry Waste)</label>
</div>

CSS：

input{display: none;}
label{cursor:pointer;display: inline-block;position: relative;padding-left: 25px;}
label:hover,input:checked+label{color:red}
label::before{content: ""; display: inline-block; width: 14px; height: 14px; border: 1px solid #ff5e14; position: absolute; left: 0; top: 2px;}
input:checked+label::after{content: "";display: inline-block;width: 8px; height: 8px; background-color: red; position: absolute; left: 3px; top:5px}