二. 修改思路:
三. 具体代码:
代码一:设置“√”为元素的内容,点击之后显示对勾
// 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>
效果一:
代码二:设置背景图片,点击之后,显示背景图片
// 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>
效果二: