Html 在“输入”元素之前或之后生成 CSS 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4574912/
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
CSS content generation before or after 'input' elements
提问by Gui Prá
In Firefox 3 and Google Chrome 8.0 the following works as expected:
在 Firefox 3 和 Google Chrome 8.0 中，以下按预期工作：
<style type="text/css">
span:before { content: 'span: '; }
</style>
<span>Test</span> <!-- produces: "span: Test" -->
But it doesn't when the element is <input>:
但是当元素是<input>：
<style type="text/css">
input:before { content: 'input: '; }
</style>
<input type="text"></input> <!-- produces only the textbox; the generated content
is nowhere to be seen in both FF3 and Chrome 8 -->
Why is it not working like I expected?
为什么它不像我预期的那样工作？
回答by Felix Kling
With :beforeand :afteryou specify which content should be inserted before (or after) the contentinside of that element. inputelements have no content.
使用:before和:after指定应在该元素内的内容之前（或之后）插入哪些内容。input元素没有内容。
E.g. if you write <input type="text">Test</input>(which is wrong) the browser will correct this and put the text afterthe input element.
例如，如果你写的<input type="text">Test</input>（这是错误的），浏览器会纠正这一点，并把文字后输入元素。
The only thing you could do is to wrap every input element in a span or div and apply the CSS on these.
您唯一能做的就是将每个输入元素包装在一个 span 或 div 中，并在这些元素上应用 CSS。
See the examples in the specification:
请参阅规范中的示例：
For example, the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; } <p> Text </p> p:before { display: block; content: 'Some'; }...would render in exactly the same way as the following document fragment and style sheet:
<h2> Header </h2> h2 { display: run-in; } <p><span>Some</span> Text </p> span { display: block }
例如，以下文档片段和样式表：
<h2> Header </h2> h2 { display: run-in; } <p> Text </p> p:before { display: block; content: 'Some'; }...将以与以下文档片段和样式表完全相同的方式呈现：
<h2> Header </h2> h2 { display: run-in; } <p><span>Some</span> Text </p> span { display: block }
This is the same reason why it does not work for <br>, <img>, etc. (<textarea>seems to be special).
这是一样的道理，为什么它不工作<br>，<img>等（<textarea>好像是特殊）。
回答by SW4
This is not due to inputtags not having any content per-se, but that their content is outside the scope of CSS.
这不是因为input标签本身没有任何内容，而是因为它们的内容超出了 CSS 的范围。
inputelements are a special type called replaced elements, these do not support :pseudoselectors like :beforeand :after.
input元素是一种称为 的特殊类型replaced elements，它们不支持和这样的:pseudo选择器。:before:after
In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independent of the CSS. Typical replaced elements are
<img>,<object>,<video>or form elements like<textarea>and<input>. Some elements, like<audio>or<canvas>are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.
在 CSS 中，替换元素是表示超出 CSS 范围的元素。这些是一种外部对象，其表示独立于 CSS。典型替换元素是
<img>，<object>，<video>或形式的元素，如<textarea>和<input>。某些元素，例如<audio>或<canvas>仅在特定情况下才被替换的元素。使用 CSS 内容属性插入的对象是匿名替换元素。
Note that this is even referred to in the spec:
请注意，规范中甚至提到了这一点：
This specification does not fully define the interaction of
:beforeand:afterwith replaced elements (such as IMG in HTML).
本规范没有完全定义替换元素（例如 HTML 中的 IMG）的交互
:before和交互:after。
And more explicitly:
而更明确：
Replaced elements do not have
::beforeand::afterpseudo-elements
替换元素没有
::before和::after伪元素
回答by Brook Jordan
Something like this works:
像这样的工作：
input + label::after {
content: 'click my input';
color: black;
}
input:focus + label::after {
content: 'not valid yet';
color: red;
}
input:valid + label::after {
content: 'looks good';
color: green;
}<input id="input" type="number" required />
<label for="input"></label>Then add some floats or positioning to order stuff.
然后添加一些浮动或定位来订购东西。
回答by cockpitseeker
fyi <form>supports :before/ :afteras well, might be of help if you wrap your <input>element with it... (got myself a design issue with that too)
fyi<form>支持:before/:after以及，如果你<input>用它包装你的元素可能会有所帮助......（我自己也遇到了设计问题）
回答by Roman Bondar
Use tags labeland our method for =, is bound to input. If follow the rules of the form, and avoid confusion with tags, use the following:
使用标签label和我们的方法=，绑定到input。如果遵循表单规则并避免与标签混淆，请使用以下内容：
<style type="text/css">
label.lab:before { content: 'input: '; }
</style>
or compare (short code):
或比较（短代码）：
<style type="text/css">
div label { content: 'input: '; color: red; }
</style>
form....
形式....
<label class="lab" for="single"></label><input name="n" id="single" ...><label for="single"> - simle</label>
or compare (short code):
或比较（短代码）：
<div><label></label><input name="n" ...></div>
