我正在尝试在 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
,因为它是由第三方控件生成的。
:before
和 :after
在容器内渲染
和<input>不能包含其他元素。
伪元素只能在容器元素上定义(或者说只支持)。因为它们的呈现方式是 within 容器本身作为子元素。 input
不能包含其他元素,因此它们不受支持。另一方面,一个 button
也是一个表单元素支持它们,因为它是其他子元素的容器。
如果你问我,如果某些浏览器确实在非容器元素上显示这两个伪元素,这是一个错误和非标准一致性。规范直接讲元素内容...
W3C 规范
如果我们仔细阅读 the specification它实际上是说它们被插入 inside 一个包含元素:
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.
看到了吗? 元素的文档树内容。据我了解,这意味着在容器中。
我是一名优秀的程序员,十分优秀!