我试图:after在input字段上使用CSS伪元素,但它不起作用.如果我使用它span,它可以正常工作.
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
Run Code Online (Sandbox Code Playgroud)
这是有效的(在"buu!"之后和"更多"之前放置笑脸)
<span class="mystyle">buuu!</span>a some more
Run Code Online (Sandbox Code Playgroud)
这不起作用 - 它只用红色调色someValue,但没有笑脸.
<input class="mystyle" type="text" value="someValue">
Run Code Online (Sandbox Code Playgroud)
我究竟做错了什么?我应该使用另一个伪选择器吗?
注意:我不能添加span我的input,因为它是由第三方控件生成的.
在Firefox 3和Google Chrome 8.0中,以下工作正常:
<style type="text/css">
span:before { content: 'span: '; }
</style>
<span>Test</span> <!-- produces: "span: Test" -->
Run Code Online (Sandbox Code Playgroud)
但是当元素是<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 -->
Run Code Online (Sandbox Code Playgroud)
为什么它不像我预期的那样工作?