html如何实现圆形的复选框

admin
行业动态
2024-04-08
1

要实现圆形的复选框，可以使用HTML和CSS，以下是一个简单的示例：

1、创建一个HTML文件，添加一个<input>标签，并设置其类型为checkbox，使用CSS样式将其设置为圆形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>圆形复选框</title>
    <style>
        /* 隐藏默认的复选框 */
        input[type="checkbox"] {
            display: none;
        }
        /* 自定义圆形复选框 */
        .circlecheckbox {
            position: relative;
            display: inlineblock;
            width: 20px;
            height: 20px;
            backgroundcolor: #fff;
            border: 2px solid #ccc;
            borderradius: 50%;
            cursor: pointer;
        }
        /* 当复选框被选中时，显示圆形复选框的背景颜色 */
        .circlecheckbox input:checked + .circlecheckbox {
            backgroundcolor: #4CAF50;
        }
        /* 当复选框被选中时，显示圆形复选框的边框颜色 */
        .circlecheckbox input:checked + .circlecheckbox::before {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 14px;
            height: 14px;
            borderradius: 50%;
            backgroundcolor: #fff;
        }
    </style>
</head>
<body>
    <label >
        <input type="checkbox">
    </label>
</body>
</html>

在这个示例中，我们创建了一个名为.circlecheckbox的自定义类，用于设置圆形复选框的样式，我们将默认的复选框隐藏起来，然后使用伪元素::before来绘制圆形背景，当复选框被选中时，我们改变背景颜色和边框颜色。