input框转圆角

最新推荐文章于 2024-04-24 17:04:10 发布

心灵的清道夫

最新推荐文章于 2024-04-24 17:04:10 发布

阅读量541

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/zp200146/article/details/125190605

版权

    input:checked {
                background: red;
                border: none;
            }
            input {
                width: 28px;
                height: 28px;
                background-color: #ffffff;
                border: solid 2px #d1cfd0;
                -webkit-border-radius: 50%;
                border-radius: 50%;
                font-size: 0.8rem;
                margin: 0;
                padding: 0;
                position: relative;
                display: inline-block;
                vertical-align: top;
                cursor: default;
                -webkit-appearance: none;
                -webkit-user-select: none;
                user-select: none;
                -webkit-transition: background-color ease 0.1s;
                transition: background-color ease 0.1s;
                outline: none;
            }
           input:checked::after {
                content: '';
                top: 8px;
                left: 8px;
                position: absolute;
                background: transparent;
                border: #fff solid 2px;
                border-top: none;
                border-right: none;
                height: 6px;
                width: 10px;
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }