Html 你能用 CSS 来设计一个活动表单输入的标签吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4388102/
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
Can you style an active form input's label with just CSS
提问by Dave Taylor
Given the following html
鉴于以下 html
<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />
You can style the input on focus using
您可以使用样式设置焦点上的输入
input:focus { background: green; }
Is there a way of also styling the <label />without JavaScript?
有没有办法在<label />没有 JavaScript的情况下设置样式？
Thanks all
谢谢大家
回答by Ian Wood
No. there is unfortunately no predecessor selector in css
不，不幸的是，css 中没有前任选择器
input:focus -+ label { ... }
would be lovely.
会很可爱。
having the label after the input would be dooable:
在输入后添加标签是可行的：
input:focus + label { ... }
you could use some positioning to display before...
你可以使用一些定位来显示之前...
回答by Ric
UPDATED
更新
Make sure you check the draft as this may change: https://drafts.csswg.org/selectors-4/#relational
请务必检查草稿，因为这可能会发生变化：https: //drafts.csswg.org/selectors-4/#relational
The :has() relational pseudo-class will allow the selection of parents for example, the following selector matches only <a>elements that contain an <img>child:
:has() 关系伪类将允许选择父级，例如，以下选择器仅匹配<a>包含<img>子级的元素 ：
a:has(> img)
This can be combined with other selectors such as :focus, :activeor :notto offer a lot of potential.
这可以与其他选择器结合使用，例如:focus,:active或:not提供很多潜力。
Unfortunately browser support isn't great at the time of writing: https://caniuse.com/#feat=css-has
不幸的是，在撰写本文时浏览器支持并不好：https: //caniuse.com/#feat=css-has
Adding this for people finding this page in the future. CSS4 will have a parent selector allowing you to choose what element to apply the style to:
为将来找到此页面的人添加此内容。CSS4 将有一个父选择器，允许您选择要应用样式的元素：
I think the current spec allows you to specify which item is matched with a ! sign - the subject selector.
label! > input {
font-weight: bold;
}
This allows far greater control than just parent, for example in this scary chain below the p tag is the target!
article > h1 + section > p! > b > a {
font-style: italic;
}
我认为当前的规范允许您指定哪个项目与 ! 符号 - 主题选择器。
label! > input {
font-weight: bold;
}
这允许比父级更大的控制，例如在 p 标签下方的这个可怕的链中是目标！
article > h1 + section > p! > b > a {
font-style: italic;
}
回答by Spudley
You can use an attribute selector:
您可以使用属性选择器：
label[for=inputelement]:focus,
label[for=inputelement]:active {
/*styles here*/
}
Note that this isn't supported by IE6, but should work in all other browsers, including IE7 and IE8.
请注意，这不受 IE6 支持，但应该适用于所有其他浏览器，包括 IE7 和 IE8。
That will obviously only work for that specific ID. If you would like it to work for allIDs, simply leave out the ID:
这显然只适用于该特定 ID。如果您希望它适用于所有ID，只需省略 ID：
label[for]:focus,
label[for]:active {
/*styles here*/
}
This will now work for all labels with a forattribute.
这现在适用于具有for属性的所有标签。
If you need something in between, you'll need to use classes.
如果您需要介于两者之间的东西，则需要使用类。
回答by David says reinstate Monica
You can, so long as the labelfollows the inputin the Mark-up:
您可以，只要label遵循input标记中的：
input:focus + label,
input:active + label {
/* style */
}
回答by yar1
This can be done if you target browsers that support flexbox - see this: http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview
如果您的目标浏览器支持 flexbox，则可以这样做 - 请参阅：http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview
For brevity, the css there is minimal but you'll need some browser specific prefixes to extend support to somewhat older browsers.
为简洁起见，那里的 css 很少，但您需要一些浏览器特定的前缀来扩展对较旧浏览器的支持。
回答by Kai Noack
For completeness, if your input field is within the labelyou can use focus-within:
为了完整起见，如果您的输入字段在标签内，您可以使用focus-within：
HTML:
HTML：
<label>
<input name="example" type="text">
</label>
CSS:
CSS：
label:focus-within {
background: #DEF;
}
回答by Jeannine
Give your input button a style class
给你的输入按钮一个样式类
css style:
css样式：
INPUT.book:hover, INPUT.book:focus:hover {
background-image:url(book_over.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
INPUT.book {
background-image:url(book_active.png);
background-repeat:no-repeat;
height: 40px;
width: 140px;
font-family:calibri, Tahoma;
font-size:20px;
color:#ffffff;
text-align: center;
font-weight: bold;
}
and the input html:
和输入html：
<input name="Bestil2" type="submit" class="book" value="Book m?de" />
I haven't figured out yet, how to avoid grey background even though I have a transparent png file, maybe just an jpg will do. But I hope this helps. Good luck :-)
我还没有弄清楚，即使我有一个透明的 png 文件，如何避免灰色背景，也许只是一个 jpg 就可以了。但我希望这会有所帮助。祝你好运 ：-）
