当输入在标签之后时如何更改输入焦点上的标签？ [复制]答案

【问题标题】：How to change label on input focus when input comes after label? [duplicate]当输入在标签之后时如何更改输入焦点上的标签？ [复制]
【发布时间】：2020-06-02 09:26:56
【问题描述】：

<div id="my-field">
    <label class="my-label">Label</label>
    <input class="my-input" value="input" />
</div>

#my-field{
}
.my-label {
}
.my-input{
}

有什么方法可以在输入焦点集中时自定义 .my-label 的 CSS 而无需触及 HTML？有多种方法可以选择后继兄弟元素。但是有什么方法可以选择前任吗？

注意：项目中有一个限制，这里不能修改HTML。一切都必须在 CSS 中完成。也没有 jQuery/JS。

【问题讨论】：

CSS 不能在 DOM 中向上传播，据我所知，在当前 HTML 布局中仅使用 CSS 是不可能的。我能想到的最接近解决方案的方法是隐藏您的标签并使用伪元素创建您自己的虚假自定义标签。
不改html就不行，如果能稍微改一下html就可以了。

标签： html css

【解决方案1】：

没有。不幸的是，css中没有前任选择器

input:focus -+ label { ... }

会很可爱。

在输入之后添加标签是可行的：

input:focus + label { ... }

你可以使用一些定位显示之前...

【讨论】：

【解决方案2】：

在这种情况下（因为输入没有任何其他同级），您可以使用同级 CSS 选择器 ~。

input:focus ~ label {...}

【讨论】：

【解决方案3】：

如果#my-field只有一个输入框，可以试试:focus-within：

#my-field:focus-within .my-label{ ... }

【讨论】：

【解决方案4】：

这是一种无需更改 HTML 结构即可实现的方法。

:focus-within CSS 伪类表示已获得焦点的元素或包含已获得焦点的元素。换句话说，它表示一个元素本身与:focus伪类匹配或有一个由:focus匹配的后代

请注意，示例在整个表单和内部输入包装上使用:focus-within<div>。

详细了解:focus-within 选择器。

#my-field:focus-within .my-label {
  background: red;
}

<div id="my-field">
    <label class="my-label">Label</label>
    <input class="my-input" value="input" />
</div>

如果这有帮助，请告诉我。

【讨论】：