div手写复选框样式

 

  <div

                    class="select_box"

                    style="margin-left: 8px"

                    @click="checkAllFn(item, index)"

                    :class="[item.selected ? 'choose_blockr' : '']"

                  >

                    <i class="feature" v-if="item.selected"></i>

                  </div>

<style lang="scss" scoped>

.select_box {

  height: 12px;

  width: 12px;

  border-radius: 3px;

  border: 1px solid #6f6f6f;

  margin-right: 7px;

}

.choose_blockr {

  background: #0075ff;

  border: 0;

}

.feature {

  width: 10px;

  height: 6px;

  display: inline-block;

  border: 1px solid #ffffff;

  border-width: 0 0 2px 2px;

  transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  -webkit-transform: rotate(-45deg);

  -o-transform: rotate(-45deg);

  margin-bottom: 2rem; /*vertical-align: baseline;*/

}

</style>