复选框样式复写

<div class="checbox">
  <input type="checkbox" class="saveid" value="" id="saveid">
  <label for="saveid" id="for_saveid"><span>复选框</span></label>
</div>
#saveid + #for_saveid {
  display: block;
  width: 12px;
  height: 12px;
  cursor: pointer;
  position: absolute;
  top: 4px;
  left: 75px;
  background: rgba(0, 150, 136, 0.05);
  border-radius: 10px;
  border: 1px solid #009688;
  padding: 0;
  min-height: 10px;
}

#saveid:checked + label:before {
  display: block;
  content: "\2022"; /* 圆点 */
  text-align: center;
  font-size: 16px;
  color: #009688;
  position: relative;
  top: -7px;
}

#for_saveid span {
  display: inline-block;
  white-space: nowrap;
  margin-left: 12px;
  position: absolute;
  top: -3px;
}

input[type=checkbox] {
  visibility: hidden;
}

猜你喜欢

转载自www.cnblogs.com/caoxen/p/11685367.html
今日推荐