美化表单元素之单选框的美化

你的名字 2023-07-20 05:35 1阅读 0赞

**在html的表单元素中我们可以采用下列代码生成单选框：**

该代码块实现的效果如下：  
![在这里插入图片描述][20200331151308577.png_pic_center]  
是不是与一般我们所见的单选框不太一样？有点丑，而且我们不能改变该单选框的背景颜色等等，因为它是html5默认的样式。

这里补充几个单选框的知识点：

①这里的input元素要与lable元素建立关系，实现点击lable元素中书写的内容即选中这个框的效果；
     ②这里第一个input元素中有布尔属性checked,实现默认选中该单选框的效果；
     ③要给这两个单选框加上同一个name,证明它们是一起的，避免选中多个框。

其实我们采用js插件可以实现许多漂亮的单选框，但是采用css我们也可以实现自己制作许多漂亮的单选框，大体思路：

将input元素隐藏，利用伪类选择器ckecked，选中其后的span元素
    （利用伪元素选择器自己制作单选框），实现点击后有单选框的效果

下面具体说下代码实现：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>单选框的美化</title>
        <style>
        .radio-item .radio{
        
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background-color:gold;
            display: inline-block;
        }
        .radio-item input:checked+.radio::after{
        
            content: "";
            width: 6px;
            height: 6px;
            display: block;
            border-radius: 50%;
            margin-left: 3.5px;
            margin-top: 3.5px;
            background-color: #008c8c;
        }
        .radio-item input{
        
            display: none;
        }
        </style>
    </head>
    <body>
        <label class="radio-item">
         <input type="radio" name="radio" checked>
         <span class="radio"></span>
         <span>男</span>
        </label>
        <label class="radio-item">
         <input type="radio" name="radio" checked>
         <span class="radio"></span>
         <span>男</span>
        </label>    
    </body>
    </html>

这是实现的效果：

![在这里插入图片描述][20200331153855996.png_pic_center] 这里制作的比较简陋，仅仅改变了小圆圈的颜色还有背景颜色，想要实现更多的效果也可以自己设置哦.

这里说几点注意事项：  
①在input元素之后又重新创建了一个没有内容的span元素，以便于input被点击后大圆圈中间可以出现小圆圈，使用margin调节小圆圈的位置；  
②行盒无法设置宽高，所以应该重新设置该元素 `display:inline-block;`  
③新创建的span元素，应设置为块盒，否则无法设置上下margin.

美化单选框实际上就是创建出了一个新的元素，重新设置样式，把原来的单选框隐藏掉所以千万不要被事物的外在所欺骗，要透过外在看本质，富有想象力，解决问题。fighting！！！

[20200331151308577.png_pic_center]: /images/20230528/039d6c65612d42cfac3344a7795069cc.png
[20200331153855996.png_pic_center]: /images/20230528/1acc886b896b496d90ef0166e28c930a.png