如何修改标签默认样式

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

原创最新推荐文章于 2023-09-12 17:21:28 发布 · 608 阅读

0 ·

CC 4.0 BY-SA版权

html&css 专栏收录该内容

7 篇文章

订阅专栏

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

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