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

我正在尝试使用:afterCSS 伪元素input字段，但它不起作用。如果我将它与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，因为它是由第三方控件生成的。

:before and :after在容器内渲染

并且 不能包含其他元素。

伪元素只能在容器元素上定义（或者更好地说仅受支持）。因为它们的渲染方式是within容器本身作为子元素。input不能包含其他元素，因此不支持它们。 Abutton另一方面，这也是一个表单元素支持它们，因为它是其他子元素的容器。

如果你问我，是否有一些浏览器does在非容器元素上显示这两个伪元素，这是一个错误并且不符合标准。规范直接谈论元素内容...

W3C规范

如果我们仔细阅读规格 http://www.w3.org/TR/CSS2/generate.html#before-after-content它实际上说它们已插入inside包含元素：

作者使用 :before 和 :after 伪元素指定生成内容的样式和位置。正如其名称所示，:before 和 :after 伪元素指定元素的文档树内容之前和之后的内容位置。 'content' 属性与这些伪元素一起指定插入的内容。

See? 元素的文档树content