时间戳

首页 > 解决方案 > 如何使用纯 CSS（无 JS）来控制关于复选框的标签样式？

html - 如何使用纯 CSS（无 JS）来控制关于复选框的标签样式？

问题描述

我有一个 HTML 复选框，带有一个<input type="checkbox">和一个<label>这样的：

我想根据checkbox元素的检查状态来设置标签的样式。是否可以使用纯 CSS来做到这一点？我怎样才能做到这一点？

例如，我想隐藏复选框点并使用标签样式在页面上节省一些空间：

在此处输入图像描述

标签： htmlcss

解决方案

:checkedCSS 伪类选择器代表任何选中或切换到 ON 状态的单选/复选框/选项元素。

您可能想在MDN上阅读更多相关信息。

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"]:checked + label {
    font-weight: bold;
    text-decoration: underline;
}
<input id="label1" type="checkbox" name="label"/><label for="label1">Label 1</label><br />
<input id="label2" type="checkbox" name="label"/><label for="label2">Label 2</label>

推荐阅读