div+css 實現(xiàn)checkbox

// html
<span class="checkbox" @click="isChecked" :class="[checked? 'checked' : '']"></span>

// js
checked = false
isChecked() {
    this.checked = !this.checked
 }

// css
.checkbox
    display inline-block
    position relative
    width 11px
    height 11px
    line-height 11px
    top -2px
    &:before
      content ''
      display inline-block
      position absolute
      left 0
      top 0
      width 11px
      height 11px
      background #fff
      border 1px solid #888
      border-radius 2px
    &:after
      display block
      content ''
      position absolute
      left 2px
      top 3px
      width 7px
      height 3px
      border 2px solid #fff
      border-top 0
      border-right 0
      transform rotate(-50deg)
    &:hover
      &:before
        border-color #666
    &.checked::before
      background-color red
      border-color red
    &.checked::after
      display inline-block
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容