如何修改标签默认样式

最新推荐文章于 2023-09-12 17:21:28 发布

cloud_guo

最新推荐文章于 2023-09-12 17:21:28 发布

阅读量539

点赞数

分类专栏： html&css

本文链接：https://blog.csdn.net/gs6511/article/details/53176908

版权

html&css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

下面是HTML代码

<label>
    <input type="checkbox" class="hidden_input" />
    <span class="checkbox"></span>
    我是标签
</label>

css代码

.hidden_input {
   opacity: 0;
    position: absolute;
    z-index: -1;
}

input[type=checkbox]+span {
    /* 自定义样式 */
    display: inline-block;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: gray;        
}

/* 动态变化时的样式 */
input[type=checkbox]:checked+span {
    background-color: red;
}