自定义单选框和复选框案例

Posted 2020-10-01

效果如下：

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