<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>复选框圆圈样式</title> <style> span { position: relative; user-select: none; } .Checkbox { position: absolute; visibility: hidden; } .Checkbox+label { position: absolute; width: 16px; height: 16px; border: 1px solid #A6A6A6; border-radius: 50%; background-color: #DEDEDE; } .Checkbox:checked+label:after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 4px; background: red; } </style> </head> <body> <span> <input type="checkbox" class="Checkbox" id="check1"> <label for="check1"></label> <label >11111</label> </span> </body> </html>