<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>checkbox</title> <style> .checkbox input { display: none; } .checkbox input+label { background: url(./checkbox1.png) left center no-repeat; background-size: 20px 20px; padding-left: 20px; } .checkbox input:checked+label { background-image: url(./checkbox2.png); } </style> </head> <body> <div class="checkbox"> <input type="checkbox" checked id="music" /> <label for="music">音乐</label> <input type="checkbox" id="sport" /> <label for="sport">运动</label> </div> </body> </html>