介绍 & lt; div 类=皉eset-radio"比;
,,,& lt; input checked 类型=皉adio", id=癮ge1", name=癮ge"比;
,,,& lt; span 类=皉eal-target"祝辞& lt;/span>
& lt;/div> .reset-radio {
,,,显示:,inline-block;
,,,位置:,相对;
,,,宽度:,16 px;
,,,身高:,16 px;
}
.reset-radio .real-target {
,,,z - index:, 1;
,,,宽度:,100%;
,,,身高:,100%;
,,,位置:,绝对;
,,,显示:,inline-block;
,,,背景:,# ffffff;
边境:,,,,1 px solid # dadde0;
,,,这个特性:,100%;
,,,:,0;
,,,左:,0;
,,,底部:,0;
}
.reset-radio 输入(type=广播),{
,,,光标:,指针;
,,,z - index:, 2;
,,,宽度:,16 px;
,,,身高:,16 px;
,,,不透明度:,0;
,,,位置:,绝对;
,,,左:,0;
,,,:,0;
,,,保证金:,0;
,,,右:,0;
,,,底部:,0;
}
.reset-radio 输入:检查+ span {
,,,边框颜色:,# 48 b4ec;
}
.reset-radio 输入:检查+跨度:before {
,,,内容:,& # 39;& # 39;;
,,,位置:,绝对;
,,,背景:,# 48 b4ec;
,,,宽度:,6 px;
,,,身高:,6 px;
,,,:,50%;
,,,左:,50%;
,,,变换:,翻译(-50%,-50%);
,,,这个特性:,100%;
}
这篇文章将为大家详细讲解有关纯CSS怎么实现广播和复选框效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强> radio-and-checkbox
纯CSS实现广播和复选框效果
<强> reset-radio
在开发PC端的项目时,经常会用到电台和复选框组件,可是因为原生的样式相对来说不符合设计师的设计风格,所以我们可能会经常引用第三方的模块去实现,或者通过JS等其他方式去攻击。这样相对来说增加了代码量不说,还特别复杂,所以才有了这个纯CSS依赖原生输入(广播)和(复选框)的实现方式,主要代码如下:
html主要代码
CSS代码,这里主要是通过一个子节点跨度去配合输入:检查兄弟选择器,来修改样式
关于“纯CSS怎么实现广播和复选框效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
