自定義單選框和複選框

效果以下：

html代碼：

<div class="form-inline">    
　　<div class="radio-wrap">                                                                     
   　　<label class="radio">
      　　<input type="radio" name="radio" checked="checked">
         <i></i>是
      </label>
      <label class="radio">
      　　<input type="radio" name="radio">
         <i></i>否
      </label>
   </div>

   <div class="check-wrap">
   　　<label class="checkbox">
      　　<input type="checkbox" name="checkbox" checked="checked">
         <i></i>選項一
      </label>
      <label class="checkbox">
      　　<input type="checkbox" name="checkbox">
         <i></i>選項二
      </label>
      <label class="checkbox">
      　　<input type="checkbox" name="checkbox">
         <i></i>選項三
      </label>        
　　</div>
</div>

css樣式：

.form-inline .checkbox,
.form-inline .radio {
  position: relative;
  display: inline-block;
  font-weight: 400;
  margin-bottom: 4px;
  margin-right: 10px;
  padding-left: 2px;
  line-height: 25px;
  color: #0c4757;
  cursor: pointer;
  font-size: 13px;    
}

.form-inline .checkbox.state-disabled, 
.form-inline .radio.state-disabled {
  cursor: default!important;
  opacity: .6!important;
}

/*add*/
.form-inline .checkbox input,
.form-inline .radio input {
  position: absolute;
  left: -9999px;
}

.form-inline .checkbox i,
.form-inline .radio i {
  position: absolute;
  top: 6px;
  left: 0;
  display: block;
  width: 15px;
  height: 15px;
  outline: 0;
  border-width: 1px;
  border-style: solid;
  background: #fff;
}

.form-inline .radio i {
  border-radius: 50%;
}

.form-inline .checkbox i,
.form-inline .radio i{
  border-color: #acacac;
  transition: border-color .3s;
  -webkit-transition: border-color .3s;
}

.form-inline .checkbox input:checked+i,
.form-inline .radio input:checked+i {
  border-color: #acacac;
}

.form-inline .checkbox input+i:after, 
.form-inline .radio input+i:after {
  position: absolute;
  opacity: 0;
  transition: opacity .1s;
  -webkit-transition: opacity .1s;
}

.form-inline .radio input+i:after {
  content: '';
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #47A8C0;
}

.form-inline .checkbox input:checked+i:after,
.form-inline .radio input:checked+i:after {
  opacity: 1;
}

.form-inline .checkbox input+i:after {
  content: '\f00c';
  top: -6px;
  left: -1px;
  width: 15px;
  height: 15px;
  font-family: FontAwesome;
  font-size: 15px;
  color: #47A8C0;
}

 注意：一、此方法中沒用用到任何圖片，只用到font awesome字體，對應的編碼參考此文：網頁使用Font Awesome圖標字體時，css定義 content 屬性。

　　　 二、此效果不兼容IE9+、chrome、FF等高版本瀏覽器。

因此在head中引用該css時，須要作以下兼容處理：

<!--[if gt IE 8]><--!>
<link rel="stylesheet" href="css/notIE8.css">
<!--<![endif]-->

 補充：若是複選框字體想用阿里的iconfont圖標，那麼在引進iconfont包的基礎上，類.form-inline .checkbox input+i:after中的content和font-family都須要進行修改，其中content爲圖標的unicode編碼，但有一點不一樣，html中能夠直接使用，在css中要換算成\e608，形如：

.form-inline .checkbox input+i:after {
  content: '\e608';
  top: -6px;
  left: -1px;
  width: 15px;
  height: 15px;
  font-family: 'iconfont';
  font-size: 15px;
  color: #47A8C0;
}