如何修改标签默认样式

cloud_guo

于 2016-11-15 20:38:45 发布

阅读量593

点赞数

CC 4.0 BY-SA版权

分类专栏： html&css

本文链接：https://blog.youkuaiyun.com/gs6511/article/details/53176908

html&css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现自定义样式的复选框的方法。通过将实际的输入元素隐藏，并利用相邻的span元素来展示复选框的状态，可以完全控制其外观和交互效果。当复选框被选中时，背景颜色会从灰色变为红色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是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;
}