Html5自定义checkbox样式

借助其它标签样式

思路:

设置checkbox类型的input表单为不可见
自定义div或label标签的常态及选中样式
根据checkbox的状态更新div或label标签的样式

index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
</template>
...
<yd-cell-item type="checkbox" >
<div slot="left" style="display: flex; align-items: center;">
<input type="checkbox" v-model="user_agreement" />
<div v-bind:class="[user_agreement ? 'yz-checkbox-checked' : 'yz-checkbox-normal']" style="width: 18px; height: 18px;"></div>
<span style="margin-left: 10px; color: #A1A1A1; font-size: 14px;">我已阅读并同意服务协议及隐私条款</span>
</div>
<!--<yd-cell-item type="checkbox">-->
<!--<span slot="left">我已阅读并同意服务协议及隐私条款</span>-->
<!--<input slot="right" type="checkbox" value="User Agreement" v-model="user_agreement"/>-->
</yd-cell-item>
...
</template>

<style type="text/css">
.yd-cell:after {
border-bottom: 0;
}
</style>

<script>
export default {
name: 'login',
data () {
return {
user_agreement: false
}
}
</script>

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
input[type=checkbox] {
display: none;
}
.yz-checkbox-normal {
background-image: url("/static/images/ic_checkbox_normal.png");
background-size: 100% 100%;
border: none;
}
.yz-checkbox-checked {
background-image: url("/static/images/ic_checkbox_checked.png");
background-size: 100% 100%;
border: none;
}

直接定义CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
input[type="checkbox"] {
-webkit-appearance: none; /*清除复选框默认样式*/
background: #fff url("/static/images/ic_checkbox_normal.png") no-repeat; /*复选框的背景图,就是上图*/
background-size: 100% 100%;
width: 16px;
height: 16px;
vertical-align: middle;
outline: none; /*去掉自带的边框*/
border: none;
}
input[type="checkbox"]:checked {
-webkit-appearance: none; /*清除复选框默认样式*/
background: url("/static/images/ic_checkbox_checked.png") no-repeat;
background-size: 100% 100%;
width: 16px;
height: 16px;
vertical-align: middle;
outline: none;
border: none;
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :