设计师眼中的页面总是充满美感的，但当一个充满美感的设计图放在程序员眼前时，情形会大为不同。我们会考虑，这个设计应该怎么实现，难度如何，等等等。在不断的撕逼中，我们尝试着以用户的角度去考虑问题。毕竟，他们高兴就好_。
先看一下单选按钮的设计图：
我是美丽的单选按钮
之前尝试过直接用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样式的修改。
