html - 我可以在输入字段上使用:before或:after伪元素吗？

Question

我试图在:after字段上使用input CSS伪元素，但是它不起作用。如果我将它与span一起使用，则可以正常运行。

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

这有效（在“ buu！”之后和“更多”之前放置笑脸）

<span class="mystyle">buuu!</span>a some more

这是行不通的-它只将someValue涂成红色，但没有笑脸。

<input class="mystyle" type="text" value="someValue">

我究竟做错了什么？我应该使用另一个伪选择器吗？

注意：我无法在 span周围添加 input，因为它是由第三方控件生成的。

Answer 1

Internet Explorer 7及更低版本中的任何元素均不支持:after和:before。

它也不打算用于替换后的元素，例如表单元素（输入）和图像元素。

换句话说，使用纯CSS是不可能的。

但是，如果使用jquery，则可以使用

$(".mystyle").after("add your smiley here");

API docs on .after

用javascript附加内容。这将适用于所有浏览器。