纯css美化单选按钮
2016-02-22 16:25
656 查看
<!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化单选框</title> <style type="text/css"> body { background: #fff; padding: 0; margin: 0; } .regular-radio{ display: none; } .regular-radio + label { -webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 50px; display: inline-block; position: relative; } .regular-radio:checked + label:after { content: ' '; width: 12px; height: 12px; border-radius: 50px; position: absolute; top: 3px; background: #99a1a7; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); text-shadow: 0px; left: 3px; font-size: 32px; } .regular-radio:checked + label { background-color: #e9ecee; color: #99a1a7; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1); } .regular-radio:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } </style> </head> <body> <div id="holder"> <div> <div class="tag">Radio Small</div> <div class="button-holder"> <input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" /><label for="radio-1-1"></label><br /> <input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"></label><br /> <input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"></label><br /> <input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"></label><br /> </div> </div> </div> </body> </html>
内容有所删减
来自
http://www.html5tricks.com/css3-checkbox-radiobox.html
相关文章推荐
- css强大的负边距,用于两个挨着的div border只取一个。
- 【CSS3】background-size
- css隐藏文字
- css的position定位
- NSMutableAttributedString同一个label中显示不同的字体样式
- 【CSS3】background-clip
- 【CSS3】background-origin
- 【CSS3】文本阴影text-shadow
- CSS伪类伪元素
- 【CSS3】嵌入字体@font-face
- css设计指南-笔记7
- css设计指南-笔记6
- 【CSS3】text-overflow 与 word-wrap
- CSS实现背景透明,文字不透明,兼容所有浏览器
- 新发现。css3控制浏览器滚动条的样式
- Css3 API
- css3动画库——animate.css以及css3动画一些有趣的实现
- CSS选择器笔记
- CSS选择器优先级
- CSS3读书笔记(from imooc) 第一章 初识CSS3