我可以在输入字段上使用：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

:after并且:before在Internet Explorer 7及更高版本中的任何元素上均不受支持。

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

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

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

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

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