<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> input{ -webkit-appearance: none;/* 清除默认样式 */ position: relative; left: 100px; top: 100px; width: 22px; height: 22px; border: 1px solid black; } input:checked{ background: palegreen;/* 被选中时框框中的颜色 */ } input:after{/* 添加内部白框框 */ content: ''; position: absolute; top: 1px; width: 14px; height: 14px; border: 2px solid white;/* 框框颜色和粗细 */ left: 1px; } </style> </head> <body> <input type="checkbox" value="commit" /> </body> </html>
效果图