表单界面：改变单选框和复选框的样式

曾经终败给现在 2023-08-17 15:23 143阅读 0赞

# 单选框效果： #

![在这里插入图片描述][20190926105836468.gif]

# 单选框的样式是不可改变的，实际上的改变样式只是寻找别的东西来替换单选框。 #

# css代码 #

input{
                display: none;
            }
            span::before{
                display: block;
                width: 20px;
                height: 20px;
                content: " ";
                border: 1px solid black;
                box-sizing: border-box;
                border-radius: 50%;
                position: absolute;        }
            span::after{
                display: block;
                width: 20px;
                height: 20px;
                content: " ";
                background: red;
                float: left;
                border-radius: 50%;
                transform: scale(0);
                transition: all 2s;
            }
            label{
                display: block;
            }
            #abc:checked~span::after{
                transform: scale(0.8);
            }
            #efg:checked~span::after{
                transform: scale(0.8);
            }

# html代码： #

注：1. 两个单选框name设为相同，代表这两个单选框为一个组别，即只能选中一个  
2.~ 为选择器，代表选择某元素下的所有要选择的元素  
3. label的for属性：与input的id搭配使用，代表label的存在是为了相应id的input元素 即控制label可以达到input可以产生的效果

--------------------

说明：

1.  本例中使用 after 和 before 伪元素来替代单选框
2.  分别将 after 和 before 设置为块元素并且设置对应的大小颜色和属性
3.  为after设置浮动向左，after即可浮动到span前面，before的后面
4.  再为before设置绝对定位 position:absolute; before与after即可重叠
5.  本例中为after 和before设置圆边框，使两者成为圆形样式  
    注：（after与before应设置相同大小，再通过scale来改变相应大小，这样即使页面缩放两者也不会错位）
6.  最后通过相应的input id来选择对应的span  
    \#abc:checked~span::after\{transform: scale(0.8);\}
7.  本例中before为替代单选框的边框 ，after为替代单选框中的圆形填充，且设置效果为after更改大小

# 复选框效果 #

![在这里插入图片描述][20190926113137363.gif]

# css代码 #

input{
                display: none;
            }
            span::before{
                display: block;
                width: 40px;
                height: 20px;
                content: " ";
                border: 3px solid black;
                box-sizing: border-box;
                position: absolute;        }
            span::after{
                display: block;
                width: 40px;
                height: 20px;
                content: " ";
                border: 3px solid red;
                border-top: none;
                border-right: none;
                float: left;
                transform: scale(0) ;
                transition: all 2s;
                
            }
            label{
                display: block;
            }
            #abc:checked~span::after{
                transform: scale(0.4) rotate(-45deg);
            }

# html代码 #

实现原理与单选框基本相同，里面的对号是after的左边框和下边框

总结：通过label的for属性和 伪元素before after可以改变单选框和复选框样式，效果不只是上述的效果，例如可以设置样式为图片等。

[20190926105836468.gif]: /images/20230810/05a3716496a140ceaac2c7f6b98037dd.png
[20190926113137363.gif]: /images/20230810/7353c918dbba4b58bef3b77428918e24.png