HTML美化单选、滚动条

标签：

<input type="radio" id="radio1" name="radio-1-set" class="regular-radio" checked /><label for="radio1"></label>

/* RADIO */

.regular-radio {display: none;}

.regular-radio + label {-webkit-appearance: none; 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: 5px; border-radius: 50px; display: inline-block; position: relative;}

.regular-radio:checked + label:after { content: ‘ ‘; width: 8px; height:8px; border-radius: 50px; position: absolute; top: 1px; background: #fff; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); text-shadow: 0px; left: 1px; font-size: 32px;}

.regular-radio:checked + label { 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 + label:active, .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);}

.big-radio + label { padding: 16px;}

.big-radio:checked + label:after { width: 24px; height: 24px; left: 4px; top: 4px;}

/* 美化滚动条 */

::-webkit-scrollbar { width: 0px;height: 14px; }  

::-webkit-scrollbar-track,::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent;}    

::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;  }    

::-webkit-scrollbar-thumb {min-height: 20px;  background-clip: content-box;  box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  }   

::-webkit-scrollbar-corner {background: transparent;} 

HTML美化单选、滚动条

标签：

原文地址：http://www.cnblogs.com/mrt-yyy/p/4449736.html