纯CSS改写checkbox样式,让复选框看起来更舒服一些
2015-10-11 20:53
597 查看
系统自带的checkbox样式,呵呵
特别是在手机上,得拿放大镜看,改它!
纯CSS的,利用了label,看代码:
如果你有CSS相关基础的话,还可以做进一步改动,比如颜色,边线等
同样可以做出单选框radio来。
特别是在手机上,得拿放大镜看,改它!
纯CSS的,利用了label,看代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link href="../css/bootstrap.css" rel="stylesheet"> <style type="text/css"> .mycheck { width: 25px; margin: 20px 100px; position: relative; } .mycheck input[type=checkbox] { visibility: hidden; } .mycheck label { cursor: pointer; position: absolute; width: 25px; height: 25px; top: 0; left: 0; background: #fff; border:2px solid #ccc; -moz-border-radius: 3px; /* Gecko browsers */ -webkit-border-radius: 3px; /* Webkit browsers */ border-radius:3px; /* W3C syntax */ } .mycheck label:after { opacity: 0; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 6px; left: 6px; border: 2px solid #333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .mycheck label:hover::after { opacity: 0.5; } .mycheck input[type=checkbox]:checked + label:after { opacity: 1; } </style> </head> <body> <h3>Checkbox</h3> <div class="mycheck"> <input type="checkbox" value="1" id="checkbox1" name="" /> <label for="checkbox1"></label> </div> </body> </html>
如果你有CSS相关基础的话,还可以做进一步改动,比如颜色,边线等
同样可以做出单选框radio来。
相关文章推荐
- 使用CSS3制作简单的图形运动变换
- JS设置css的float效果
- CSS3参考手册
- CSS3中的content和attr的用法
- js控制css样式
- css 填坑常用代码分享
- CSS从大图中抠取小图完整教程(background-position应用) (转)
- 关于CSS的优先级,CSS优先级计算,多个class引用
- 雪碧图 CSS sprite 优化性能
- html/css获得第一章
- notepad的monokai风格中makefile标签样式字体颜色问题
- CSS - 关于li中图文混排不能垂直居中的问题
- css伪类以及伪元素
- CSS优先级
- html初学(这两天带着一个女孩写div+css,总感觉她理解的方式不是很对)
- xaml控件样式大全(太有用了)C#
- WPF中DataGrid设置列头样式
- [CSS] Firefox required input textarea 粉红色边框去除方案 .
- Animate.css动画演示 (很棒)
- Html CSS笔记