二. 修改思路:
给原本的checkbox框加上
visibility: hidden;
属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置。然后使用绝对定位
label
标签覆盖到checkbox框上面,通过修改label
标签达到修改checkbox框的目的。
三. 具体代码:
代码一:设置“√”为元素的内容,点击之后显示对勾
// HTML代码
<input type="checkbox" id="test" class="test">同意
<label for="test"></label>
// CSS代码
<style>
#test{
visibility: hidden;
}
#test +label{
width: 18px;
height: 18px;
background-color: #c07721;
display: block;
position: relative;
top: -18px;
left: -2px;
border-radius: 4px;
cursor: pointer;
overflow: hidden;
}
#test:checked +label:before{
content: "√"; /*这里设置选中之后的显示内容*/
width: 18px;
height: 18px;
display: block;
color: #ffffff;
text-align: center;
font-weight: bolder;
line-height: 18px;
}
</style>
效果一:
![img_1d89f7bf7727551bfe84344a7c007898.gif](https://yqfile.alicdn.com/img_1d89f7bf7727551bfe84344a7c007898.gif?x-oss-process=image/resize,w_1400/format,webp)
代码二:设置背景图片,点击之后,显示背景图片
// HTML代码
<input type="checkbox" id="test" class="test">同意
<label for="test"></label>
// CSS代码
<style>
#test{
visibility: hidden;
}
#test +label{
width: 18px;
height: 18px;
background-color: #666666;
display: block;
position: relative;
top: -18px;
left: -2px;
border-radius: 4px;
cursor: pointer;
overflow: hidden;
}
#test:checked +label:before{
content: " ";
width: 18px;
height: 18px;
background: url("img/check.jpg") no-repeat;
background-size: 100% auto;
display: block;
color: #ffffff;
text-align: center;
font-weight: bolder;
line-height: 18px;
}
</style>
效果二:
![img_8e4f9786568e4952a3df2efc5cde3f45.gif](https://yqfile.alicdn.com/img_8e4f9786568e4952a3df2efc5cde3f45.gif?x-oss-process=image/resize,w_1400/format,webp)