html部分：

<input type="radio" name="templateColor" value="GREY" id="GREY"/><label for="GREY">灰色</label>

<input type="radio" name="templateColor" value="ORANGE" id="ORANGE"/><label for="ORANGE">橙色</label>

<input type="radio" name="templateColor" value="RED"  id="RED"/><label for="RED">红色</label>

<input type="radio" name="templateColor" value="GREEN"  id="GREEN"/><label for="GREEN">绿色</label>

CSS部分：

input[type=radio] {

    position: absolute;

    clip: rect(0, 0, 0, 0);

  }

  /* 未被选中的单选框样式 空心圆圈*/

input[type=radio] + label::before {

    content: '';

    display: inline-block;

    vertical-align: middle;

    width: 15px;

    height: 15px;

    margin-right: 5px;

    box-sizing: border-box;

    border-radius: 50%;

    margin-bottom: 4px;

    border: 1px solid #bfcbd9;

  }

  /* 被选中的单选框样式 给空心圆圈中间加上背景色*/

input[type=radio]:checked + label::before {

    background-color: #FF7E45;

    background-clip: content-box; /* 规定背景颜色的绘制区域 */

    padding: 2px;

  }

  /* 单选框文字的样式 */

input[type=radio] + label {

    margin-right: 5px;

  }