< meta charset ="UTF-8" > < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > < title > Custom Checkbox </ title > < style > /* 隐藏原生的checkbox */ .custom-checkbox input[type="checkbox"] { opacity : 0 ; position : absolute ; /* 自定义样式 */ .custom-checkbox label { display : inline-block ; width : 20px ; height : 20px ; border : 2px solid red ; border-radius : 4px ; position : relative ; cursor : pointer ; transition : background-color 0.3s ease ; /* 当checkbox被选中时的样式 */ .custom-checkbox input[type="checkbox"]:checked + label { background-color : blue ; /* 改变选中时的背景颜色 */ /* 添加一个小勾勾 */ .custom-checkbox input[type="checkbox"]:checked + label::after { content : "" ; position : absolute ; top : 4px ; left : 6px ; width : 8px ; height : 4px ; border : 2px solid white ; border-top : none ; border-right : none ; transform : rotate(-45deg) ; </ style > < style > /* 自定义样式 */ .custom-checkbox input[type="checkbox"] { width : 20px ; height : 20px ; border : 2px solid #000 ; border-radius : 4px ; cursor : pointer ; transition : background-color 0.3s ease, border-color 0.3s ease ; /* 当checkbox被选中时的样式 */ .custom-checkbox input[type="checkbox"]:checked { background-color : blue ; /* 改变选中时的背景颜色 */ border-color : blue ; /* 改变选中时的边框颜色 */ </ style > </ head > < div class ="custom-checkbox" > < input type ="checkbox" id ="checkbox1" > < label for ="checkbox1" ></ label > </ div > < h1 > ---------------------- </ h1 > < div class ="custom-checkbox" > < input type ="checkbox" id ="checkbox3" > < label for ="checkbox3" ></ label > </ div > </ body > </ html >