在“输入”元素之前或之后生成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 -->

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

With :before and :after您指定应在之前（或之后）插入哪些内容内容该元素内部。input元素没有内容。

例如。如果你写<input type="text">Test</input>（这是错误的）浏览器会纠正这个错误并输入文本after输入元素。

您唯一能做的就是将每个输入元素包装在 span 或 div 中，并对其应用 CSS。

请参阅中的示例规格 http://www.w3.org/TR/CSS2/generate.html#before-after-content:

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

<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>, etc. (<textarea>好像很特别）。