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

Question

我尝试在input字段上使用:after 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">

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

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

Answer 1

在Internet Explorer7及更低版本中，任何元素上都不支持:after和:before。

它也不能用于替换的元素，如表单元素 (inputs)和图像元素。

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

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

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

API docs on .after

用javascript追加你的内容。这将适用于所有浏览器。

Answer 2

:before和:after在容器内呈现

，并且不能包含其他元素。

伪元素只能在容器元素上定义(或者更好地说，只能被支持)。因为它们的呈现方式在中是的，所以容器本身就是一个子元素。input不能包含其他元素，因此不支持这些元素。另一方面，也是表单元素的button支持它们，因为它是其他子元素的容器。

如果您问我，如果某些浏览器确实在非容器元素上显示了这两个伪元素，那就是一个bug和非标准一致性。规范直接涉及元素内容...

W3C规范

如果我们仔细阅读the specification，它实际上表明它们被插入到包含元素的中：

作者使用:before和:after伪元素指定生成内容的样式和位置。顾名思义，:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。“content”属性与这些伪元素一起指定要插入的内容。

看见?元素的文档树content。据我所知，这意味着中的是一个容器。

Answer 3

奇怪的是，它适用于某些类型的输入。至少在Chrome中，

<input type="checkbox" />

工作正常，与

<input type="radio" />

这只是type=text和其他一些不能工作的。