通过CSS3伪类，美化Radio按钮样式

标签：

CSS3样式：

/* RADIO */
.button-holder {
 width: 100%;
}
.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;
}

代码：

<div class="button-holder">
   <input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><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>

通过CSS3伪类，美化Radio按钮样式

标签：

原文地址：http://www.cnblogs.com/anhuidu/p/4485570.html