<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input{ display: none; } label{ display: inline-block; width: 10px; height: 10px; border: 1px solid #ccc; position: relative; } input:checked+label{ border-color: #888; } input:checked+label:before{ content: ''; display: inline-block; width: 2px; height: 6px; background: #000; transform: rotate(-30deg); position: absolute; top: 4px; left: 0; } input:checked+label:after{ content: ''; display: inline-block; width: 2px; height: 10px; background: #000; transform: rotate(30deg); position: absolute; top: 1px; left: 3px; } </style> </head> <body> <input id="food_c" type="checkbox" name="food" /> <label for="food_c"></label>川菜 <input id="food_x" type="checkbox" name="food" /> <label for="food_x"></label>湘菜 <input id="food_s" type="checkbox" name="food" /> <label for="food_s"></label>苏菜 <input id="food_z" type="checkbox" name="food" /> <label for="food_z"></label>浙菜 </body> </html>