在“输入”元素之前或之后的CSS内容生成

问题描述

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

  c>： c>之前 c>： c>之后指定哪个内容应该在该元素内部之前（或之后）插入内容。 输入元素没有内容。
 
 
 
如果你写< input type =text> Test< / input> （这是错误的），浏览器会纠正这个， / em>输入元素。
 
 
 
你可以做的唯一事情是将每个输入元素包含在span或div中，并对这些元素应用CSS。
 
 
 
请参阅规格中的示例：
不适用于< 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:
This is the same reason why it does not work for <br>, <img>, etc. (<textarea> seems to be special).
                        
这篇关于在“输入”元素之前或之后的CSS内容生成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！