checkbox时，第一种方法是可以加个label for来继承Input的ID，然后修改label就可以了。如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改checkbox样式</title> </head> <style> input{ display: none; } input:checked+label { background-color: blue; } label { background-color: red; display: inline-block; 50px; height: 50px; } </style> <body> <input type="checkbox" name="next" id="id"> <label for="id"></label> </body> </html>
第二种可以用伪类after或者before来更改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改checkbox样式</title> </head> <style> input { position: relative; border: none; } input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; background: #fff; 100%; height: 100%; } input[type="checkbox"]:checked::before { content: "2713"; border: 1px solid #2196f3; color: #2196f3; } </style> <body> <input type="checkbox" name="next" id="id"> </body> </html>