<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox样式</title>
</head>
<style>
.remberpass input,
.remberpass span {
float: left;
}
/* 将浏览器默认的checkbox样式重置 */
input[type=checkbox] {
-webkit-appearance: none;
width: 15px;
height: 15px;
background-color: white;
border: 1px solid #5692fc;
border-radius: 3px;
}
input[type=checkbox]:checked {
background: red;/*可加背景图片*/
background-repeat: no-repeat;
}
</style>
<body>
<div class="remberpass">
<input class="test" type="checkbox" />
<span>记住密码</span>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script>
$(".test").click(function(){
if($("input[type='checkbox']").prop('checked')){
alert("选中");
}else{
alert("未选中")
}
})
</script>
