程序小屋

记录生活中的点滴,分享、学习、创新

文章内容 1623753400

checkbox自定义样式

<label>

    <input type="checkbox" ng-model="checkFormObject.obj.receive">

    <span></span>

    I consent to receive marketing communications from xxx

</label>

1

2

3

4

5

/* 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;

    }

  }

*