vue input复选框checkbox默认样式纯css修改

1<div class="data_list" v-for="(item,index) in data_list" :key="index">
2    <input type="checkbox" class="check_box tui-checkbox" :id="'id'+item.id" :value="item.id" v-model="checkedNames">
3    <label :for="'id'+item.id" class="title">{{item.title}}</label >
4</div>
5
6.tui-checkbox:checked {
7  background: #1673ff;
8  border: solid 1px #1673ff;
9}
10.tui-checkbox {
11  width: 0.5rem;
12  height: 0.5rem;
13  background-color: #ffffff;
14  border: solid 1px #dddddd;
15  -webkit-border-radius: 50%;
16  border-radius: 50%;
17  font-size: 0.8rem;
18  margin: 0;
19  padding: 0;
20  position: relative;
21  display: inline-block;
22  vertical-align: top;
23  cursor: default;
24  -webkit-appearance: none;
25  -webkit-user-select: none;
26  user-select: none;
27  -webkit-transition: background-color ease 0.6s;
28  transition: background-color ease 0.6s;
29}
30.tui-checkbox:checked::after {
31  content: '';
32  top: 0.1rem;
33  left: 0.09rem;
34  position: absolute;
35  background: transparent;
36  border: #fff solid 2px;
37  border-top: none;
38  border-right: none;
39  height: 0.12rem;
40  width: 0.25rem;
41  -moz-transform: rotate(-45deg);
42  -ms-transform: rotate(-45deg);
43  -webkit-transform: rotate(-45deg);
44  transform: rotate(-45deg);
45}