标签不会在输入焦点上转换
标签不会在输入焦点上转换
提问于 2022-07-13 14:57:35
当有人单击输入时，我想转换输入的标签。但它不会改变。
如果我做了.user-input:focus, .user-input:valid，它会更改输入，这意味着它应该与标签一起工作。
.user-input:focus+.user-label,
.user-input:valid+.user-label {
color: yellow;
transform: translate(10px, -14px) scale(.8);
}<div class="container">
<div class="input-group">
<label for="user" class="user-label">Username</label>
<input type="text" name="user" class="user-input" required>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-13 15:17:21
- in css我们只能选择下一个兄弟姐妹，我们不能选择在DOM.
- so，中选择兄弟姐妹之前的兄弟姐妹。我刚刚在css后面放置了
label，以便在输入之前保留标签。
。
.input-group {
display: flex;
flex-direction: row-reverse;
justify-content: start;
}
.input-group {
display: flex;
flex-direction: row-reverse;
justify-content: start;
}
.user-label {
transition: 0.5s;
}
.user-input:active+.user-label,
.user-input:focus+.user-label,
.user-input:valid+.user-label {
color: yellow;
transform: translate(10px, -14px) scale(.8);
}<div class="container">
<div class="input-group">
<input type="text" name="user" class="user-input" required>
<label for="user" class="user-label">Username</label>
</div>
</div>
Stack Overflow用户
发布于 2022-07-13 15:25:28
您可以通过稍微更改HTML结构来实现这一点，用label标记切换输入，不能在目标元素之前的div中使用css元素进行选择。
HTML
<div class="container">
<div class="input-group">
<input type="text" name="user" class="user-input" required>
<label for="user" class="user-label">Username</label>
</div>
</div>
CSS
.user-input:focus + .user-label {
color: yellow;
transform: translate(10px, -14px) scale(.8);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72968410
复制相关文章
相似问题
腾讯云开发者
