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