修改checkbox与被选中label样式

最新推荐文章于 2022-11-18 17:47:53 发布

很单纯的娃

最新推荐文章于 2022-11-18 17:47:53 发布

阅读量633

点赞数

本文链接：https://blog.csdn.net/qq_37826599/article/details/119324719

版权

								
                                input[type="checkbox"]{
                                    width:0.14rem;
                                    height:0.14rem;
                                    display: inline-block;
                                    text-align: center;
                                    vertical-align: middle; 
                                    line-height: 0.14rem;
                                    position: relative;
                                    border-radius: 0.02rem;
                                }
                                input[type="checkbox"]::before{
                                    content: "";
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    background: #0b1425;
                                    width: 100%;
                                    height: 100%;
                                    border: 1px solid rgba($color: #d9d9d9, $alpha: 0.5);
                                    border-radius: 0.02rem;
                                }
                                input[type="checkbox"]:checked::before{
                                    content: "\2713";
                                    background-color: rgba(117, 251, 204, 1);
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width:100%;
                                    color:#fff;
                                    font-size: 0.16rem;
                                    font-weight: bold;
                                }
                                input:checked+label{
                                    color: rgba(95, 255, 200, 1);
                                }