纯css美化单选按钮

来源：互联网发布：svn迁移到linux 编辑：程序博客网时间：2024/06/15 19:41

<!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

0 0