CSS Radio 样式美化

radio.jpg

<div class="cluesDistribution">
    <div class="forRadio">
      <input id="radio-3" name="radio2" type="radio" checked>
      <label for="radio-3" class="radio-label">所有人可留言</label>
    </div>
    <div class="forRadio">
      <input id="radio-4" name="radio2" type="radio">
      <label for="radio-4" class="radio-label">仅关注后可留言</label>
    </div>
</div>

/**美化radio**/
.forRadio {
  margin-right: 16px;

}
.forRadio .radio-label{
  cursor: pointer;
}
.forRadio input[type="radio"] {
  position: absolute;
  opacity: 0;

}
.forRadio input[type="radio"] + .radio-label:before {
  content: '';
  background: #fff;
  border-radius: 100%;
  border: 1px solid #c8c8c8;
  display: inline-block;
  width: 14px;
  height:14px;
  position: relative;
  margin-right: 8px;
  top: 1.5px;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}
.forRadio input[type="radio"] + .radio-label:hover:before{
  border:1px solid #0c66ff;
}
.forRadio input[type="radio"]:checked + .radio-label:before {
  background-color: #0c66ff;
  box-shadow: inset 0 0 0 3px #f4f4f4;
  border-color: #0c66ff;
}
.forRadio input[type="radio"]:focus + .radio-label:before {
  outline: none;
  border-color: #0c66ff;
}
.forRadio input[type="radio"]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 3px #f4f4f4;
  border-color: #c8c8c8;
  background: #c8c8c8;
}
.forRadio input[type="radio"] + .radio-label:empty:before {
  margin-right: 0;
}