在“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 --> 

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

: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>似乎是特殊的)。

这不是由于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伪元素

像这样的作品:

 <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

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

使用标签标签和我们的方法= ,必然要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>