如何更改checkbox的默认属性

&蓝天之约&

于 2021-07-26 18:40:03 发布

阅读量861

点赞数

分类专栏： css 文章标签： html5 css

本文链接：https://blog.youkuaiyun.com/zhaofangyuan111/article/details/119115831

版权

css 专栏收录该内容

1 篇文章

订阅专栏

先设置checkbox基本属性，注意给checkbox的appearance设置为none

.itemCheck {
    position: relative;
    left: 10px;
    top: 14px;
    width: 25px;
    height: 25px;
    color: #fff;
    outline: none;
    background: #fff;
    -webkit-appearance: none;
}

给checkbox添加伪元素设置边框圆角等：

.itemCheck::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    background: #fff;
    color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #999;
}

设置checkbox选中状态下的样式：

.itemCheck:checked::before {
    content: '\2713';
    position: absolute;
    top: -10px;
    left: 0;
    background: #fff;
    color: green;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid skyblue;
    text-align: center;
    font-size: 20px;
}