自定义 css checkbox 样式

最新推荐文章于 2024-01-02 16:06:35 发布

燕儿归

最新推荐文章于 2024-01-02 16:06:35 发布

阅读量642

点赞数

分类专栏： css 文章标签： checkbox 样式

本文链接：https://blog.csdn.net/hr541659660/article/details/51384728

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

.checkbox{
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        margin: 0;
        cursor: pointer;
        vertical-align: bottom;
        background: #fff;
        border: 1px solid #DADADA;
        -webkit-border-radius: 1px;
        -moz-border-radius: 1px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        overflow:hidden;
}

.checkbox:active {
        border-color: #DADADA;
        background: #ebebeb;
}       
        
.checkbox:hover {
        border-color: #0E76A8;
        -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
        -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
        box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
}

.checkbox:checked {
        background: #fff;
}

.checkbox:checked::after {
        content: url(../images/blue.png);
        position: absolute;
        top: -1px;
        right: 0px;
        left: -1px;
        display: block;        
}
.checkbox:focus {
        outline: none;
        border-color: #DADADA;
}
 .radio{
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius:10px;
        margin: 0;
        cursor: pointer;
        vertical-align: bottom;
        background: #fff;
        border: 1px solid #DADADA;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        -webkit-box-sizing: border-box;
        position: relative;
        overflow:hidden;
}

.radio:active {
        border-color: #DADADA;
        background: #ebebeb;
}       
        
.radio:hover {
        border-color: #0E76A8;
        -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
        -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
        box-shadow: inset 0 2px 2px rgba(0,0,0,0.1);
}

.radio:checked {
        background: #fff;
}

.radio:checked::after {
        content: url(../images/blue.png);
        position: absolute;
        top:-1px;
        right: 0px;
        left: -21px;
        display: block;
                
}
.radio:focus {
        outline: none;
        border-color: #DADADA;
}

用到的图片