用css自定义radio样式

设计师眼中的页面总是充满美感的，但当一个充满美感的设计图放在程序员眼前时，情形会大为不同。我们会考虑，这个设计应该怎么实现，难度如何，等等等。在不断的撕逼中，我们尝试着以用户的角度去考虑问题。毕竟，他们高兴就好_{_}。

先看一下单选按钮的设计图：

我是美丽的单选按钮

之前尝试过直接用css对单选按钮进行修改，可是基本不可能修改为以上样式。于是，改用其他元素代替。当改用其他元素代替后，我们又会考虑一个问题。能否继续使用原生radio的选中逻辑？或者用js来模拟选中逻辑？就这样，样式的问题扩展为一个比较复杂的交互处理问题。但是，我们的原则是，能用简单的方式就绝对不用复杂的方式。在css3选择器的帮助下，我们确实可以只用css实现上述效果。

页面dom结构

<label class="m-check ui-margin">
     <input type="radio" name="remindType" value="2" v-model="remind"/>
     <div class="m-radio ui-pos"></div>
     <span>天</span>
</label>

整个结构包含在label标签里，以扩大radio的选中范围。虽然在用一个div来模拟radio的样式，但是仍然需要input来帮忙实现选中时的样式效果，而重点也就在这里。

css代码

.ui-middle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.m-radio{
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    border: solid 1px #ccc;
    border-radius: 50%;
    cursor: pointer;
    }
.m-radio:after{
    .ui-middle;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
}
.m-check{
    display: inline-block;
}
.m-check input[type="radio"]{
    display: none;
}
.m-check input[type="radio"]:checked + div{
    border:solid 2px #60A3F5;
}
.m-check input[type="radio"]:checked + div:after{
    background-color: #60A3F5;
}

首先，将input标签隐藏，然后将div标签的样式修改为设计图中的按钮样式，其中的实心点，则用伪元素实现，并让伪元素在父元素中绝对居中。

接下来是选中逻辑的实现，当点击label标签时，隐藏的input标签被选中，其状态发生改变。状态用伪类选择器选中。这个时候，用兄弟选择器选中的div的样式发生改变，就实现了选中效果。

总结：为了让隐藏的input标签被选中，使用label将其包裹。用伪类选择器和相邻元素选择器实现div样式的修改。