Html 仅使用 css 为输入字段切换标签（活动/焦点）上的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16859542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
toggling styles on label (active/focus) for input field with css only
提问by worenga
Wondering whether if there is a css-onlyway to perform to toggle styles on the corresponding label on input's focus. So far I have:
想知道是否有一种仅使用css 的方法来切换输入焦点上相应标签上的样式。到目前为止，我有：
$(document).on('focus active', 'input',function(){
$('label[for='+$(this).attr('id')+']').addClass('active');
});
$(document).on('blur', 'input',function(){
$('label[for='+$(this).attr('id')+']').removeClass('active');
});
HTML:
HTML：
<div class="row">
<label for="contact_form_mail">Email</label>
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
</div>
And CSS:
和 CSS：
.active{ color:red; }
Edit:I am surely aware of the child and sibling selectors "workarounds", but rearranging clean markup for the pure sake of styling seems not right, so if there is another pure css way this answer wins!
编辑：我肯定知道子选择器和兄弟选择器的“解决方法”，但是为了造型而重新排列干净的标记似乎是不对的，所以如果有另一种纯 css 方式，这个答案就会获胜！
回答by PSL
Try this way:- Place your label after input and float it left. And apply siblings.
试试这种方式：- 在输入后放置标签并将其向左浮动。并申请兄弟姐妹。
Html
html
<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>
CSS
CSS
label {
float:left;
}
input:focus + label {
color:red;
}
Demo
演示
This is a hack to get the adjacent sibling selector work as it applies only on the following element and not the preceding one. ~will select all the adjascent siblings after this element. So if you are having different .rowfor each section of inputs then use +.
这是一种让相邻的兄弟选择器工作的技巧，因为它只适用于后面的元素而不是前面的元素。~将选择此元素之后的所有相邻兄弟姐妹。因此，如果您.row对输入的每个部分都有不同的看法，请使用+.
回答by Mr. Alien
If you are willing to switch elements, than here you go
如果你愿意切换元素，那么你去吧
<div>
<input type="text" />
<label for="e_mail">E-Mail</label>
</div>
label {
float: left;
margin-right: 5px;
}
input[type=text]:focus + label {
color: red;
}
Explanation: We are using +adjacent selector here, so when the textbox is focused, we select the labeltag and apply color red
说明：我们+这里使用的是相邻选择器，所以当文本框获得焦点时，我们选择label标签并应用颜色red
Note: Don't forget to clear floats ;)
注意：不要忘记清除浮动；)
回答by Ali Bassam
There is, but only if you place the label after the input.
有，但前提是您将标签放在输入之后。
<input name="field" type="text" />
<label for="field">Label Here</label>
input:focus + label{
color: red;
}
Now if you want the label to be placed before it, then you need to do some css styling with position absolute to place the label before the input field, then add some margin left on the input to move it to the right.
现在，如果您希望将标签放置在它之前，那么您需要使用绝对位置进行一些 css 样式以将标签放置在输入字段之前，然后在输入字段上添加一些左边距以将其向右移动。
<div>
<input name="field" type="text" />
<label for="field">Label Here</label>
</div>
div{
position: relative;
}
input{
margin-left: 40px;
}
label{
position:absolute;
left:0;
}
回答by Johnny Fekete
It's possible with CSS only, without switching the order of the label and input. You can use a :focus-withinCSS pseudo-class on the parent element, which applies to elements, that has a child element with the focus.
仅使用 CSS 即可，无需切换标签和输入的顺序。您可以:focus-within在父元素上使用CSS 伪类，它适用于具有焦点子元素的元素。
In your example, you could use the following:
在您的示例中，您可以使用以下内容：
.row:focus-within label {
color: red;
}
Note, that this pseudo-class is relatively new, so only modern browsers support it.
请注意，这个伪类相对较新，因此只有现代浏览器支持它。
回答by Li Zhen Wu
This give you label on top of input, highlight label while input focus.
HTML
这为您提供了输入顶部的标签，在输入焦点时突出显示标签。
HTML
<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>
<code>
.row{
display:flex;
flex-direction:column-reverse;
align-self:flex-start;
}
.row input:focus{
border: 1px solid red;
}
.row input:focus+label{
color:red;
}
</code>
回答by hennson
First we can use a selector that matches a label immediately followed by the input tag (input:focus + label). But there is still the problem, that the label follows after the actual input field. If one would like to have it above the text input we need to switch the positions of the controls. This can be done with a CSS pseudo-table.
首先，我们可以使用一个匹配标签的选择器，紧接着是输入标签（input:focus + label）。但仍然存在问题，即标签跟随在实际输入字段之后。如果想把它放在文本输入上方，我们需要切换控件的位置。这可以通过 CSS 伪表来完成。
<div class="pseudo-table">
<input id="yourname" name="yourname" type="text" placeholder="Name...">
<label for="yourname">Name</label>
</div>
The style for the artifical table is...
人造桌子的风格是……
.pseudo-table { display: table; }
With this in place we could transform the label e.g. to a table-header-group:
有了这个，我们可以将标签转换为table-header-group：
label { display: table-header-group; }
and the input field to a table-row-group:
以及table-row-group的输入字段：
input { display: table-row-group; }
In combination with our followed by selector we're done and it looks right:
结合我们的后跟选择器，我们完成了，它看起来是正确的：
input:focus + label {
color:red;
font-weight: bold;
}
For a demo please see this Fiddle
有关演示，请参阅此Fiddle
HTH
HTH
回答by sjkm
There is no selector to match a preceding element... This matches a label immediately followed by an input tag.
没有选择器匹配前面的元素...这匹配紧跟在输入标签之后的标签。
input:focus + label {
color: red;
}
