html - 我可以使用 :before or :after pseudo-element on an input field? 吗

Question

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

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

这行得通(把笑脸放在“buu!”之后和“some more”之前)

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

这不起作用 - 它只将 someValue 涂成红色，但没有笑脸。

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

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

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

Answer 1

:before 和 :after 在容器内渲染

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

---

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

如果你问我，如果某些浏览器确实在非容器元素上显示这两个伪元素，这是一个错误和不符合标准。规范直接谈到元素内容...

W3C 规范

如果我们仔细阅读the specification它实际上说它们被插入到包含元素的内部:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

看到了吗？ 元素的文档树内容。据我了解，这意味着在一个容器内。