gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:31:39 26 4
gpt4 key购买 nike

我试图在 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,因为它是由第三方控件生成的。

最佳答案

: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.

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

关于html - 我可以使用 :before or :after pseudo-element on an input field? 吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41697939/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com