看到那些UI框架都是有美化checkbox多选框的，不过大多是图片或者是字体图标。于是就利用label仿了个多选框效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> input{ opacity: 0; position: absolute; top: 0; left: 0; } p{ width: 20px; height: 20px; padding: 3px; margin-left: 50px; background-color: #88d; opacity: .6; border: 1px solid #333; } label{ position: relative; display: block; width: 100%; height: 100%; } label:after{ position: absolute; top: 5px; left: 4px; content: ''; display: block; width: 10px; height: 6px; border-bottom: 1px solid #333; border-left: 1px solid #333; transform: rotate(-45deg) } input:checked + label{ opacity: 0; } </style> </head> <body> <p> <input type="checkbox" id="all" name=""> <label for="all"></label> </p> </body> </html>