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

Question

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

Answer 1

你不需要任何功能，你可以通过很好地理解css选择器来做到这一点你可以试试：input[type="checkbox"]:checked+span {&nbsp; &nbsp; text-decoration: line-through;&nbsp; &nbsp; 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 {&nbsp; box-shadow: 0 0 0 3px red;}/* Change label color */input:checked+label {&nbsp; color: blue;}<input type="checkbox" name="my-checkbox" id="example"><label for="example">Check me!</label>