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

Posted

技术标签:

【中文标题】当输入在标签之后时如何更改输入焦点上的标签? [复制]【英文标题】: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就可以了。 【参考方案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&lt;div&gt;

详细了解: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>

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

【讨论】:

以上是关于当输入在标签之后时如何更改输入焦点上的标签? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

当条目在 Gtk Python 中获得焦点时如何更改输入语言

关注表单时如何更改表单中输入标签的颜色? [复制]

以角度更改焦点上的输入类型

小程序---- input获得焦点时placeholder重影BUG

CSS:输入上的目标主体:焦点[重复]

是否可以将焦点应用于我的 React 组件之一内的输入元素,而无需直接将 ref 分配给输入标签?