如何在选择时将 CSS 样式添加到复选框？

Question

我想让 HTML 复选框只有在被选中时才具有一组特定的 CSS 样式。例如，更改颜色或更改文本粗细等。我对是否应该使用函数或是否有可以使用的现有方法感到困惑。

Answer 1

你不需要任何功能，你可以通过很好地理解css选择器来做到这一点

你可以试试：

input[type="checkbox"]:checked+span {

    text-decoration: line-through;

    color:red;

}

并定义您的文本框，例如

<input type="checkbox" ><span>Some text label for checkbox</span>

这是一个例子

Answer 2

您可以通过 CSS 选择器根据当前状态控制复选框或其他输入的样式，如下所示：

input[type='checkbox'] {background-color:red;}

input[type='checkbox']:checked {background-color:blue;}

Answer 3

使用:checkedcss 伪类，您将能够在不使用 Javascript 的情况下更改元素样式。

您可以在此处阅读更多相关信息。

/* Change color */

input[type="checkbox"]:checked {

  box-shadow: 0 0 0 3px red;

}

/* Change label color */

input:checked+label {

  color: blue;

}

<input type="checkbox" name="my-checkbox" id="example">

<label for="example">Check me!</label>