纯CSS实现radio和checkbox实现效果
radio-and-checkbox
纯CSS实现radio和checkbox实现效果
reset-radio
- 在开发PC端的项目时,经常会用到radio和checkbox组件,可是因为原生的样式相对来说不符合设计师的设计风格,所以我们可能会经常引用第三方的模块去实现,或者通过JS等其他方式去hack。这样相对来说增加了代码量不说,还特别复杂,所以才有了这个纯CSS依赖原生input[radio]和input[checkbox]的实现方式,主要代码如下:
- html主要代码
<div class="reset-radio"> <input checked type="radio" id="age1" name="age"> <span class="real-target"></span> </div>
- CSS代码,这里主要是通过一个子节点span去配合input:checked兄弟选择器,来修改样式
.reset-radio { display: inline-block; position: relative; width: 16px; height: 16px; } .reset-radio .real-target { z-index: 1; width: 100%; height: 100%; position: absolute; display: inline-block; background: #ffffff; border: 1px solid #dadde0; border-radius: 100%; top: 0; left: 0; bottom: 0; } .reset-radio input[type=radio] { cursor: pointer; z-index: 2; width: 16px; height: 16px; opacity: 0; position: absolute; left: 0; top: 0; margin: 0; right: 0; bottom: 0; } .reset-radio input:checked+span { border-color: #48b4ec; } .reset-radio input:checked+span::before { content: ''; position: absolute; background: #48b4ec; width: 6px; height: 6px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; }
reset-checkbox
- reset-checkbox原理是一样的就不在赘述了。
相关推荐
风飞飘扬 2014-06-24
攻城师 2019-06-29
momode 2013-04-29
zhanghaibing00 2020-06-28
MaureenChen 2020-05-25
lbPro0 2019-11-03
donghongbz 2019-10-19
85931235 2012-01-11
yFifhting 2017-06-08
NARUTOLUOLUO 2019-07-01
人心 2019-06-30
HotStrong 2017-06-08
zfjdoreen 2016-04-13
89367741 2016-03-30
shiyiboke 2016-03-29
SinhaengHhjian 2016-01-25