input 標籤為checkbox時修改 checkbox的樣式
阿新 • • 發佈：2020-08-11
checkbox時，第一種方法是可以加個labelfor來繼承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; width: 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; width: 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>