colorui radio 样式_用css自定义radio样式

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

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

我是美丽的单选按钮

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

页面dom结构

天

整个结构包含在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样式的修改。