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

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’对应打勾款式。

成果如下

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据