CSS3修改input [type="radio&qu

最近业务需求需要做一个自定义的input [type="radio"]样式，在慕课网的CSS3教程中看到了相关的一个选择器的知识:checked选择器
教程里的代码给了我一个很方便的demo。于是我自己改造了一下，实现了自己想要的效果。

talk is cheap，show me the code

Ok,let us do it
首先是HTML结构

<div class="form1">
  <p>工作技能:</p>
  <form action="#">
    <div>
      <div class="box">
        <input type="radio" id="best-1" name="evaluation" /><span></span>
      </div>
      <label for="best-1">优秀：保证质量，高效，而可承担额外工作</label>
    </div>
    <div>
      <div class="box">
        <input type="radio" id="fine-1" name="evaluation" /><span></span>
      </div>
      <label for="fine-1">良好：能保质保量，按时完成任务</label>
    </div>
    <div>
      <div class="box">
        <input type="radio" id="medium-1" name="evaluation" /><span></span>
      </div>
      <label for="medium-1">中等：可基本完成任务，无明显亮点</label>
    </div>
    <div>
      <div class="box">
        <input type="radio" id="bad-1" name="evaluation"  /><span></span>
      </div>
      <label for="bad-1">差：可基本完成任务，无明显亮点</label>
    </div>
    </div>
  </form>
</div>

接下来是比较关键的CSS

*{margin: 0;padding: 0;}
  p{
    position: absolute;
    line-height: 1;}
  form {
    display: inline-block;
    margin-left: 89px;}
  .box {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    background: #fff;
    vertical-align: middle;
    border:1px solid #e4e4e7;
    border-radius: 100%;}
  .box input {
    opacity: 0;
    position: absolute;
    top:-3px;
    left:-4px;
    width: 100%;
    height:100%;
    z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/}
  input+span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius:50%;
    position: absolute;
    background: #1796f9;
    top: 50%;
    left:50%;
    margin: -3px 0  0 -3px;
    z-index:1;}
  input[type="radio"] + span {
    opacity: 0;}
  input[type="radio"]:checked + span {
    opacity: 1;}

话不多说，上图