5分钟DIY一个自定义单选框单选按钮
来源:互联网 发布:什么是互联网大数据 编辑:程序博客网 时间:2024/06/10 10:35
转眼间2017年了,在这里祝大家2017都能 展翅高飞、心想事成!
上次写博已经是两个月前了,这两个月七搞八搞学了不少黑科技日后必会分享给大家~下面咱们就开门见山了
由于浏览器本身自带的单选按钮且不说好看不好看,各大浏览器厂商也是一人一个样儿想要统一效果相对来说比较麻烦,所以我们常见的做法就是 自定义 一个单选按钮。像这样的效果:
这样的一个性别选择按钮非常的常见,类似的效果也都可以用这种方法写出来。
.rdo { width: 20px; height: 0px; background-color: #000; margin-right: 30px; border-radius: 50%; position: relative;}.rdo:before,.rdo:after { content: ''; display: block; position: absolute; border-radius: 50%; transition: .3s ease;}.rdo:before { top: 0px; left: 0px; width: 18px; height: 18px; background-color: #fff; border: 1px solid #000;}.rdo:after { top: 6px; left: 6px; width: 8px; height: 8px; background-color: #fff; }.rdo:checked:after { top: 4px; left: 4px; width: 12px; height: 12px; background-color:#ea879a; }.rdo:checked:before { border-color:#ea879a; }<input type="radio" class="rdo" name="sex" checked><input type="radio" class="rdo" name="sex">
没错,这里就是全部代码了,就是这么简单!如果你看懂了的话是不是感觉so easy?哈哈~
假如你没看懂也没关系,我们来一点点看。
1.在html结构中添加两个普通的单选按钮
<input type="radio" class="rdo" name="sex" checked><input type="radio" class="rdo" name="sex">
2.设置input的样式,将宽高任意一个设为0,全为0也可以
.rdo { width: 20px; height: 0px; background-color: #000; margin-right: 30px; border-radius: 50%; position: relative;}
3. 利用before和after伪元素自定义单选按钮的样式
.rdo:before,.rdo:after { content: ''; display: block; position: absolute; border-radius: 50%; transition: .3s ease;}.rdo:before { top: 0px; left: 0px; width: 18px; height: 18px; background-color: #fff; border: 1px solid #000;}.rdo:after { top: 6px; left: 6px; width: 8px; height: 8px; background-color: #fff; }
4. 当单选按钮被选中时改变被选中按钮身上before和after伪元素的样式,如上图中所示(图画得贼丑∩_∩,见谅)
.rdo:checked:after { top: 4px; left: 4px; width: 12px; height: 12px; background-color:#ea879a; }.rdo:checked:before { border-color:#ea879a; }
如果朋友们有什么更好的办法模拟单选按钮效果欢迎留言探讨^_^
所有博客已转移至个人博客地址:www.clramw.top
0 0
- 5分钟DIY一个自定义单选框单选按钮
- Blend创建一个自定义按钮
- Android自定义一个倒计时按钮
- DIY-自定义控件
- flash绑定资源自定义一个按钮
- 自定义一个带删除按钮的ListView
- iOS Tabbar上增加一个自定义按钮
- 自定义一个按钮,使按钮为上面图片下面文字
- diy一个小工具
- DIY 一个在线编辑器
- DIY一个MFC程序
- DIY一个VR小钢炮
- DIY一个C++ traits来判断enum是否有用户自定义的operator<<
- 自定义按钮
- 自定义按钮
- 自定义按钮
- 自定义按钮
- 自定义按钮
- jdbc动态条件查询防止sql注入的解决方案
- xml解析生成与解析
- android属性动画
- 操作与队列
- 告别2016迎接2017,分享一些第三方插件
- 5分钟DIY一个自定义单选框单选按钮
- NodeJS-crypto
- Spring源码剖析——依赖注入实现原理
- 软件架构概论
- android6.0下载文件路径设置
- Codeforces_607B:Zuma(区间DP)
- 视音频数据处理入门:PCM音频采样数据处理
- android-fragment的静态和动态注册。
- 单例