关于html5:css实现简单checkbox自定义样式

41次阅读

共计 575 个字符，预计需要花费 2 分钟才能阅读完成。

html 放个 input 就好
<input type="checkbox" />
款式是 less 的，能够本人转下 css

@act-color:#FFBA01;
input[type=checkbox] {
      width: 16px;
      height: 16px;
      vertical-align: sub;
      overflow: visible;
      visibility: hidden;
      &:after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        border-radius: 4px;
        border: 1px solid rgba(153,153,153,0.9);
        visibility: visible;
        color:@act-color;
        line-height: 1;
        font-size:16px;
        text-align: center;
        cursor:pointer;
      }
      &:hover:after{border-color:@act-color;}
      &:checked::after{content: '\2714';}
    }

很简略，input 外面放个 after 伪元素，代替本来的 checkbox。
原 checkbox 用 visibility: hidden; 暗藏掉。
选中款式对应 after 的 content: ‘\2714’
‘\2714’ 对应打勾款式。

成果如下

正文完