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>