<!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>