vue自定義多選樣式

自定義多選框樣式

平時一直用的架構中的樣式，這次不行了 要自己寫。

做個筆記記錄一下

很久沒寫這中樣式了

設計要求的樣式

其實那個勾并不是checkbox，而是一個i标簽，給他的兩邊設定border（白邊），然後旋轉一下實作的，因為這一整個label裡的點選都會觸發checked，是以并不用管checkbox的樣式，你另外寫一個顯示出來就好了。

template中

<div class="vote-item" v-for="(item,index) in voteList" :key="index">
        <label class="vote-more-checkbox">
          <span class="check-title">{{item.title}}</span>
          <input type="checkbox" :value="item.value" v-model="checked">
          <span class="checkbox-icon">
            <i style="width: 8px; height: 14px;"></i>
          </span>
        </label>
      </div>
           

樣式設定

.vote-item{
       width: 100%;
       height: 0.9rem;
       line-height: 0.9rem;
       margin-bottom: 0.3rem;
      .vote-more-checkbox{
        height: 0.9rem;
        display: flex;
        justify-content: space-between;
        line-height: 0.9rem;
        background-color: #EEEEEE;
        border-radius: 0.2rem;
        padding: 0 0.5rem;
        .check-title{
          font-size: 0.32rem;
          color: #6F6F6F;
        }
        .checkbox-icon{
          width: 0.36rem;
          height: 0.36rem;
          display: inline-block;
          border: 0.06rem solid #A8A8A8;
          border-radius: 0.1rem;
          position: relative;
          vertical-align: middle;
          pointer-events: none;
          color: #0086F2;
          margin-top: 0.25rem;
          i{
            content: '';
            position: absolute;
            top: 45%;
            left: 50%;
            border: 3px solid #ffffff;
            border-top: 0;
            border-left: 0;
            transform: translate(-50%,-50%) rotate(45deg) scale(0);
          }
        }
        input[type=checkbox]{
          position: absolute;
          left: -9999em;
        }
        input[type=checkbox]:checked+.checkbox-icon{
          background-color: currentColor;
          border-color: currentColor;
        }
        input[type=checkbox]:checked+.checkbox-icon>i{
          transform: translate(-50%,-50%) rotate(45deg) scale(1);
          transition: all .2s ease-in-out; 
        }
      }
    }
           

簡易的選擇就好了。

補充增加單選樣式

input[type=radio]+.checkbox-icon{
          border-radius: 50%;
        }
        input[type=checkbox]{
          position: absolute;
          left: -9999em;
        }
        input[type=checkbox]:checked+.checkbox-icon,
        input[type=radio]:checked+.checkbox-icon{
          background-color: currentColor;
          border-color: currentColor;
        }
        input[type=checkbox]:checked+.checkbox-icon>i,
        input[type=radio]:checked+.checkbox-icon>i{
          transform: translate(-50%,-50%) rotate(45deg) scale(1);
          transition: all .2s ease-in-out; 
        }