当你的才华还撑不起你的梦想时,你只能一直前进!

复选框样式复写

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

 

posted @ 2019-10-16 14:31  One'-_-'Piece  阅读(212)  评论(0编辑  收藏  举报