css中radio单点,css3实现radio选择效果
该手记通过简单教程,实现如图所示的radio单选样式效果
html结构,div中包含一个radio单选框与一个指向该单选框的label标签
苹果
初始化相关结构样式,设置div定位为relative,radio与label为absolute定位
.radio-check {
position: relative;
height: 35px;
}
.radio-check > input {
position: absolute;
left: 0;
top: 0;
width: 20px;
height:20px;
opacity: 0;
}
.radio-check > label {
position: absolute;
left: 30px;
line-height: 20px;
top: 0px;
}
通过伪类::before与::after,实现选中效果
初始化before与after状态
.radio-check > label:before {
content: '';
position: absolute;
left: -30px;
top: 0px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ddd;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.radio-check > label:after {
content: '';
position: absolute;
left: -30px;
top: 0px;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 6px;
margin-left: 6px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
利用radio选中状态的:checked伪类选择器与兄弟选择器,实现选中效果
.radio-check input[type='radio']:checked + label:before {
border-color: #4cd764;
}
.radio-check input[type='radio']:checked + label:after {
background: #4cd764;
}
整体代码示例
Examples
.radio-check {
position: relative;
height: 35px;
}
.radio-check > input {
position: absolute;
left: 0;
top: 0;
width: 20px;
height:20px;
opacity: 0;
}
.radio-check > label {
position: absolute;
left: 30px;
line-height: 20px;
top: 0px;
}
.radio-check > label:before {
content: '';
position: absolute;
left: -30px;
top: 0px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ddd;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.radio-check > label:after {
content: '';
position: absolute;
left: -30px;
top: 0px;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-top: 6px;
margin-left: 6px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.radio-check input[type='radio']:checked + label:before {
border-color: #4cd764;
}
.radio-check input[type='radio']:checked + label:after {
background: #4cd764;
}
苹果
橘子
梨
香蕉
菠萝
css中radio单点,css3实现radio选择效果相关推荐
- css 3d闪烁动画,CSS3实现闪烁动画效果的方法
本文实例讲述了CSS3实现闪烁动画效果的方法.分享给大家供大家参考.具体方法如下: 给class属性名为className的元素添加闪烁动画效果 复制代码代码如下: .className{ -webk ...
- CSS 中实现文本超出部分省略的效果
CSS 中使用 text overflow: 可以设置文字超出部分的显示效果,其中属性值 ellipsis 可将超出部分的文字显示为省略号. 在 Flex 布局下为弹性盒子设置文字省略效果时需注意以下 ...
- css中,如何给文字添加描边效果?
要在CSS中给文字添加描边效果,可以使用 text-shadow 属性.该属性用于在文字周围创建阴影,可以模拟出文字描边的效果. 以下是一个示例代码,用于在文字周围创建1像素宽的黑色描边效果: tex ...
- 关于 css 中的转换属性,CSS3中的transform转换属性
linux(centos)下挂载ntfs文件系统 在将硬盘插到Linux系统上,打开硬盘时一直提示:unknown filesystem type 'ntfs'.在尝试网上的方法也遇到了一些问题. 下 ...
- css中 Span 元素的 width 属性无效果原因及多种解决方案
先运行下程序看下: <span style='background-color:#336699;width:300px;'>123</span> 输出:123 可以看到 spa ...
- CSS中div平行移动,即轻微动画效果的使用
让div平行移动的方法 使 div 元素匀速向下移动: @keyframes mymove { from {top:0px;} to {top:200px;} }@-moz-keyframes mym ...
- 利用CSS中的transform、transition等动画效果制作拍立得卡片效果
首先我们要知道拍立得的版型样式 即图片+留白 先点击右侧 演示网页 演示效果 版型样式为一个大盒子装一个小盒子图片和文字.CSS里面要记得图片和文字分别水平居中,用text-align,还有hov ...
- CSS中cellpadding和cellspacing的代替方法
一.cellpadding 在CSS中,table, th, td{padding:0;}效果等同于cellpadding="0″. 二.cellspacing cellspacing=&q ...
- html如何设置背景半透明,css中如何设置背景半透明
css中设置背景半透明效果可以使用opacity属性,该属性用来设置元素的不透明级别,如[opacity:0.5],表示将元素设置为半透明状态. 本文操作环境:windows10系统.css 3.th ...
最新文章
- R语言stringr包str_extract函数检查数据是否包含特定模式实战
- [论文摘录] Classification of SOA Contract Specification Languages(ICWS, 2008), 第二部分
- 简析服务端通过geotools导入SHP至PG的方法
- python中的拷贝
- ssh oracle id native,hibernate解决oracle的id自增?
- [傅里叶变换及其应用学习笔记] 三十. 拉东变换
- pip下载安装与环境配置
- 实现一个react系列一:JSX和虚拟DOM
- 北斗/GPS模块输出的NMEA 0183语句详解
- C语言常见题目汇总(不断更新)(建议收藏)
- 2011年分形艺术国际大赛比赛规则
- phpnow搭建本地网站服务器,phpnow搭建本地网站服务器
- PyTorch学习—7.数据预处理模块—transforms
- Unity 调用 JAR
- java se运行环境_Java运行环境Java SE Runtime Environment (JRE) 下载
- 斩获数亿元B轮融资,这家Tier 1抢跑「L2/L2+」主战场
- VB学习第四周续--四位整数逆序
- 20201214c列出最简真分数序列
- 一天一篇latex刘海洋代码解析:1.2.2 从提纲开始
- echarts风向图
热门文章
- 蓝桥杯单片机·蓝桥杯全国软件和信息技术专业人才大赛电子类单片机 常用代码笔记
- php变量前边下划线_【变量】关于单下划线、双下划线开头变量的含义
- 2022-05-10 实现一个可拖拽的弹出登录框
- [读书笔记-3] 卓有成效的管理者-聚焦贡献
- Python将网页转化为PDF(python网页自动长截图)
- 跳转服务器scp文件,linux服务器scp文件传输(示例代码)
- 5G时代,为何各大厂纷纷杀入音视频领域?站在风口上猪都能飞
- c语言输出不同字体的汉字,【】c语言中输出汉字的编码
- P7 砖家:对不起,我要跑路了!
- fgo服务器维护检测脚本,fgo脚本会封号吗过验证用