在“input”元素之前或之后生成CSS内容

在Firefox 3和Google Chrome 8.0中，以下方式按预期工作：

<style type="text/css"> span:before { content: 'span: '; } </style> <span>Test</span> <!-- produces: "span: Test" --> 

但是，当元素是<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 --> 

为什么它不像我预期的那样工作？

Answer 1

用:before和:after指定哪个内容应该在该元素内部之前（或之后）插入。 input元素没有内容。

例如，如果您编写<input type="text">Test</input> （这是错误的），浏览器将会纠正这个问题，并将文本放在input元素之后。

你可以做的唯一的事情就是将每个input元素都包含在一个span或div中，并在这些元素上应用CSS。

请参阅规范中的示例：

例如，下面的文档片段和样式表：

 <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 } 

这是为什么它不适用于<br> ， <img>等（ <textarea>似乎是特殊的）。

Answer 2

这不是由于input标签本身没有任何内容，而是因为它们的内容超出了CSS的范围 。

input元素是被称为replaced elements的特殊types，这些不支持:pseudoselect器:before和:after 。

在CSS中，被replace的元素是表示超出CSS范围的元素。 这些是表示独立于CSS的外部对象。 典型的replace元素是<img> ， <object> ， <video>或<textarea>和<input>等表单元素。 像<audio>或<canvas>这样的元素只能在特定情况下被replace。 使用CSS内容属性插入的对象是匿名replace的元素。

请注意，这甚至在规范中提到：

本规范并没有完全定义:before和:after的replace元素（如HTML中的IMG）的交互。

更明确地说 ：

replace的元素没有::before和::after伪元素

Answer 3

像这样的作品：

 <style> input + label:after { content: 'click my input'; color: blue; } input:focus + label:after { content: 'not valid yet'; color: blue; } input:valid + label:after { content: 'looks good'; color: red; } </style> <input id="input" type="number" required /> <label for="input"></label> 

然后添加一些浮动或定位来订购东西。 这里是一个JSBin：

http://jsbin.com/roxem/2/edit

Answer 4

fyi <form>支持:before / :after ，如果你用你的<input>元素包装它可能会有所帮助…（也让我自己也有一个devise问题）

Answer 5

使用标签标签和我们的方法= ，必然要input 。 如果遵循表格的规则，并避免与标签混淆，请使用以下内容：

 <style type="text/css"> label.lab:before { content: 'input: '; } </style> 

或比较（短码）：

 <style type="text/css"> div label { content: 'input: '; color: red; } </style> 

形成….

 <label class="lab" for="single"></label><input name="n" id="single" ...><label for="single"> - simle</label> 

或比较（短码）：

 <div><label></label><input name="n" ...></div>