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

我试图在输入字段上使用:afterCSS伪元素,但它不起作用。如果我将其与span一起使用,则其工作正常

<style type=“text/css”>
.mystyle:after{content:url(smiley.gif);}
.mystyle{color:red;}
&lt/风格>

这很管用(把笑脸放在“buu!”之后,“更多”之前)

<span class=“mystyle”>布乌&lt/span>a再来一点

这不起作用-它只将某些值涂成红色,但没有笑脸

<输入class=“mystyle”type=“text”value=“someValue”>

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

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

:在容器内渲染之前和之后

和<输入>不能包含其他元素。


只能在容器元素上定义伪元素(或者更好地说,只支持伪元素)。因为它们的渲染方式是在容器本身作为子元素的内部进行的输入不能包含其他元素,因此不支持这些元素。另一方面,按钮也是支持它们的表单元素,因为它是其他子元素的容器

如果你问我,如果某个浏览器在非容器元素上显示了这两个伪元素,那就是一个bug和非标准一致性。规范直接讨论元素内容

W3C规范

如果我们仔细阅读规范,它实际上会说它们被插入包含元素的内部:

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

看到了吗元素的文档树内容。据我所知,这意味着容器中的

发表评论