自定义单选框和复选框

效果如下：

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;
}

 注意：1、此方法中没用用到任何图片，只用到font awesome字体，对应的编码参考此文：网页使用Font Awesome图标字体时，css定义 content 属性。

　　　 2、此效果不兼容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;
}

来源：https://www.cnblogs.com/uno1990/p/7305193.html