css實現簡單checkbox自定義樣式

時間 2021-04-30

標籤 css html less spa code htm input class 欄目 CSS 简体版

原文原文鏈接

html放個input就好
<input type="checkbox" />
樣式是less的，能夠本身轉下csscss

@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'對應打勾樣式。html

效果以下

less