圓形複選框
阿新 • • 發佈：2020-07-15
<!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>Document</title> <style> .custom-checkbox span{ background-color: white; border-radius: 50%; border: 2px solid #0073BF; width: 20px; height: 20px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; } .custom-checkbox input[type="checkbox"]{ display: none; } .custom-checkbox input[type="checkbox"]:checked + span{ position: relative; } .custom-checkbox input[type="checkbox"]:checked + span:after{ content: ""; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; background: #0073BF; border: #fff solid 2px; height: 12px; width: 12px; } </style> </head> <body> <label class="custom-checkbox"> <input type="checkbox"> <span></span> </label> <label class="custom-checkbox"> <input type="checkbox"> <span></span> </label> <label class="custom-checkbox"> <input type="checkbox"> <span></span> </label> </body> </html>