将input标签设置为圆形选择按钮并添加样式

代码：

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>圆形按钮</title>

</head>
<style type="text/css">
        input[type="checkbox"] {

           width: 1.2rem;

           height: 1.2rem;

           display: inline-block;
            text-align: center;

           vertical-align: baseline;

          line-height: 1.2rem;

           position: relative;

            border-radius: 50%;
            outline: none;
            -webkit-appearance: none;

           border: 1px solid #fff;

            -webkit-tab-highlight-color: rgba(0, 0, 0, 0);

            color: #fff;

            background: #fff;

        }
        input[type="checkbox"]::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            background: #fff;

            width: 100%;

            height: 100%;

            border: 1px solid #999999;

            border-radius: 50%;

            color: #fff;

        }
        input[type=checkbox]:checked::before {

            content: "\2713";

            background-color: #657afe;

            border: 1px solid #657afe;

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            color: #fff;

           font-size: 0.52rem;

           border-radius: 50%;

       }

</style>

<body>

    <input type="checkbox" value="按钮">
    
</body>

</html>

选择前：

选择后：

posted on 2022-12-02 15:29 时间完全不够用啊阅读(369) 评论(0) 编辑收藏举报