<!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>
