html - 如何通过 CSS 为聚焦输入框上的标签着色？

Question

我想要着色标签对输入焦点的影响。就像我关注输入框时，标签颜色应该变为蓝色。但这不起作用，我想知道为什么以及如何解决这个问题？

.test-label{
			color: purple;
}
.test-box:focus .test-label{
			color: blue !important;
}

<form>
		<label class = "test-label">Label</label>
		<br />
		<input type = "text" class = "test-box">
	</form>

Answer 1

您可以使用 focus-within为此。

Note it has limited support.

.test-label {
  color: purple;
}

form:focus-within .test-label {
  color: blue;
}

<form>
  <label class="test-label">Label</label>
  <br />
  <input type="text" class="test-box">
</form>