如何通过CSS实现input获取焦点时legend文本变色的效果

你当前代码不生效的核心原因是：focus-within伪类只会匹配自身或其后代元素获得焦点的节点，而<input>是<fieldset>的后代，不是<legend>的子元素，所以<legend>永远不会触发focus-within状态。

你只需要把原来的legend:focus-within选择器替换为fieldset:focus-within legend即可，意思是当fieldset内部有元素获得焦点时，选中它内部的legend元素修改样式。

修改后的完整CSS代码如下：

fieldset {
  border-radius: 0.6vh;
  border: 1vh solid black;
  padding: 1.68vh;
}

fieldset:focus-within {
  border-color: blue;
}

/* 替换为这个选择器即可 */
fieldset:focus-within legend {
  color: blue;
}

legend {
  padding: 0 1.2vh;
  color: black;
}

input {
  border: none;
  padding: 0.29vh;
}

input::placeholder {
  color: black;
}

input:focus {
  outline: none;
}

修改后input获得焦点时，fieldset边框和legend文本会同步变色，和预期效果完全一致。

内容的提问来源于stack exchange，提问作者Leprachon