vue 使用input写复选框

      

        

        {{item.name}}

      

    

    确定

 

样式：

.box {

  padding: 20px 0 30px 35px;

}

.data_list{

  align-content: center;

  display: inline-block;

  width: 165px;

  height: 30px;

}

.tui-checkbox:checked {

  background: #1673ff;

  border: solid 1px #1673ff;

}

.tui-checkbox {

  width: 18px;

  height:18px;

  background-color: #ffffff;

  border: solid 1px #dddddd;

  font-size: 18rem;

  padding-top: 8px;

  margin: 3px;

  position: relative;

  display: inline-block;

  vertical-align: top;

  /* cursor: default; */

  -webkit-appearance: none;

  -webkit-user-select: none;

  user-select: none;

  -webkit-transition: background-color ease 0.6s;

  transition: background-color ease 0.6s;

}

.tui-checkbox:checked::after {

  content: '';

  top: 0.1rem;

  left: 0.09rem;

  position: absolute;

  background: transparent;

  border: #fff solid 2px;

  border-top: none;

  border-right: none;

  height: 5px;

  width: 13px;

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

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

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

  transform: rotate(-45deg);

}