这个得用Html做的
<form action="" method="get">
您喜欢的水果？<br />
<label><input name="Fruit" type="checkbox" value="0" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="1" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="2" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="3" />梨 </label>
</form>
.box {width: 150px
height: 150px
margin: 100px auto
border-radius : 5e%
border: 5px solid #o0000e
display: flex
justify-content: center
align-items : center
}
.box: : before {
content: ""
display: block
width: 88px
height: 5epx
border: 20px solid #ee000e
border-right: none
border-top: none
transform: rotate(-45deg) translate(7px，-10px)
}
这个单纯使用css是无法实现的。
一般的话，我们实现这个效果是通过将checkbox的visibility设置为hidden，然后为checkbox添加label，对label进行样式设置，图片替换来实现你需要的效果。
建议将label里面内容替换为图片提升兼容性。
<!DOCTYPE HTML><html>
<head>
<style type="text/css">
#checkbox-1 {
display: none
visibility:hiiden
}
#checkbox-1 + label {
color: blue
}
#checkbox-1:checked + label {
color: red
}
</style>
</head>
<body>
<p><input type="checkbox" id="checkbox-1"><label for="checkbox-1">✔☑</label></p>
</body>
</html>
