在“输入”元素之前或之后的CSS内容生成 [英] CSS content generation before or after 'input' elements

问题描述

在Firefox 3和Google Chrome 8.0中，以下内容符合预期：

 < style type =text / css > 
 span：before {content：'span：'; } 
< / style> 
 
< span>测试< / span> <！ -  produce：span：Test - > 
  

但是当元素< input& code>：

 < style type =text / css> 
 input：before {content：'input：'; } 
< / style> 
 
< input type =text>< / input> <！ - 只生成文本框;生成的内容
在FF3和Chrome 8中都无法看到 - > 
  

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

c>： c>之前 c>： c>之后指定哪个内容应该在该元素内部之前（或之后）插入内容。 输入元素没有内容。

如果你写< input type =text> Test< / input> （这是错误的），浏览器会纠正这个， / em>输入元素。

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

请参阅规格中的示例：

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

 < h2>标题< / h2> h2 {display：run-in; } 
< p>文字< / p> p：before {display：block;内容：有些 } 
  

...将以与以下文档片段和样式表完全相同的方式呈现： / p>

 < h2>标题< / h2> h2 {display：run-in; } 
< p>< span>一些< / span>文字< / p> span {display：block} 
  

不适用于< br> ，< img> 等（ ; textarea> 似乎是特殊的）。

In Firefox 3 and Google Chrome 8.0 the following works as expected:

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

<span>Test</span> <!-- produces: "span: Test" -->

But it doesn't when the element is <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?

解决方案

With :before and :after you specify which content should be inserted before (or after) the content inside of that element. input elements have no content.

E.g. if you write <input type="text">Test</input> (which is wrong) the browser will correct this and put the text after the input element.

The only thing you could do is to wrap every input element in a span or div and apply the CSS on these.

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 }

This is the same reason why it does not work for <br>, <img>, etc. (<textarea> seems to be special).

这篇关于在“输入”元素之前或之后的CSS内容生成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！