checkbox自定义样式

ionluo

于 2020-12-07 11:05:56 发布

阅读量525

点赞数

分类专栏：前端积累

本文链接：https://blog.csdn.net/ion_L/article/details/110799058

版权

前端积累专栏收录该内容

54 篇文章 2 订阅

订阅专栏

<label>
    <input type="checkbox" ng-model="checkFormObject.obj.receive">
    <span></span>
    I consent to receive marketing communications from xxx
</label>

/* less */
[type='checkbox'] {
    opacity: 0;

    & + span {
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 1px solid #666;
      border-radius: 50%;
      margin-left: -15px;
      background: transparent;
    }

    &:checked + span {
      background: #666;
      padding: 2px;
      background-clip: content-box;
    }
  }