美化表单元素之单选框的美化_单选框美化-CSDN博客

本文链接：https://blog.csdn.net/niannianxi/article/details/105222131

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

    <label> 
    <input type="radio" name="radio" checked>
    <span>男</span>
    </label>
    <label>
    <input type="radio" name="radio">
    <span>女</span>
    </label>

该代码块实现的效果如下：
在这里插入图片描述
是不是与一般我们所见的单选框不太一样？有点丑，而且我们不能改变该单选框的背景颜色等等，因为它是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>

这是实现的效果：

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

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

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