vue自定义多选样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zmkyf1993/article/details/82812817

自定义多选框样式

平时一直用的框架中的样式，这次不行了 要自己写。
做个笔记记录一下
很久没写这中样式了
设计要求的样式

其实那个勾并不是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; 
        }