在實際開發(fā)中，時長會遇到這樣的問題，checkbox默認的樣式有點難看，很多的時候，會更具ui設計圖，來改變相應的checkbox的樣式，這個時候就可以自定義一個樣式了。
方法很簡單，首先講默認的checkbox樣式隱藏起來，在用兩張準備好的圖片（選中狀態(tài)的圖片和未選中的圖片）作為復選框checkbox的背景圖片就行了。
參考代碼：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>復選框checkbox自定義樣式</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" >
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
input[type=checkbox]{
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none;
cursor: pointer;
margin:0;
}
input[type=checkbox]{
width:13px;
height:13px;
background: url(images/check.png);
background-size: 100% 100%;
}
input[type=checkbox]:checked{
background: url(images/checked.png);
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="modal-body form">
<div class="col-md-7 col-sm-7 col-xs-7">
<input name="circle" type="checkbox" value="2" />周一
<input name="circle" type="checkbox" value="3" />周二
<input name="circle" type="checkbox" value="4" />周三
<input name="circle" type="checkbox" value="5" />周四
<input name="circle" type="checkbox" value="6" />周五
<input name="circle" type="checkbox" value="7" />周六
<input name="circle" type="checkbox" value="1" />周日
</div>
</div>
</body>
</html>
這個時候就能達到自己想要的樣式的效果了。
