我试图在输入字段上使用:after CSS伪元素,但它不起作用。如果我将其与跨度一起使用,它可以正常工作。

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

这是有效的(将笑脸放在“buu!”之后,然后放在“somemore”之前)

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

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

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

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

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


当前回答

这里最大的误解是单词前后的意思。它们不是指元素本身,而是指元素中的内容。因此,元素:before在内容之前,元素:after在内容之后,但两者仍在原始元素内部。

input元素在CSS视图中没有内容,因此没有:before或:after伪内容。这适用于许多其他无效或替换的元素。

元素外部没有引用的伪元素。

在另一个宇宙中,这些伪元素可能被称为其他元素,以使这种区别更清晰。甚至有人提出了一个真正在元素之外的伪元素。到目前为止,在这个宇宙中情况并非如此。

其他回答

问题提到“输入字段”。虽然我相信OP引用的是type=text、::after和::before的输入字段,但伪内容确实呈现了几种不同类型的输入字段:

input::before {
    content: "My content" /* 11 different input types will render this */
}    

这里是所有输入类型的全面演示,清楚地显示了哪些类型与(在本例中)::before伪元素兼容。

总之,这是可以呈现伪内容的所有输入类型的列表:

复选框颜色日期本地日期时间文件形象月无线电广播范围时间周

:before和:after应用于容器内部,这意味着您可以将其用于带有结束标记的元素。

它不适用于自动关闭元件。

另一方面,自动关闭的元素(如img/hr/input)也称为“替换元素”,因为它们被替换为各自的内容。“外部对象”,因为缺少更好的术语。这里读得更好

这里有另一种方法(假设您可以控制HTML):在输入之后添加一个空的<span></span>,并在CSS中使用input.mystyle+span:after将其作为目标

.field包含错误{显示:内联;颜色:红色;}.field_with_errors输入+span:之后{内容:“*”}<div class=“field_with_errors”>标签:</div><div class=“field_with_errors”><input type=“text”/><span></span></div>

我在AngularJS中使用这种方法,因为它会自动将.ng无效类添加到<input>表单元素和表单中,但不会添加到<label>中。

如果您试图使用:before和:after来设置输入元素的样式,那么很可能您试图模仿CSS堆栈中其他span、div甚至某个元素的效果。

正如Robert Koritnik的回答所指出的,:before和:after只能应用于容器元素,而输入元素不是容器。

然而,HTML5引入了button元素,它是一个容器,其行为类似于input[type=“submit | reset”]元素。

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

正如其他人所解释的,输入有点被替换为空元素,所以大多数浏览器不允许您在其中生成::before或::after伪元素。

然而,CSS工作组正在考虑在输入具有外观:none的情况下显式允许::before和::after。

从…起https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,

Safari和Chrome都允许在表单输入上使用伪元素。其他浏览器没有。我们曾考虑删除此项,但使用计数器正在记录大约0.07%的使用它的页面,这是我们最大值的20倍移除阈值。实际上,在输入上指定伪元素需要指定输入的内部结构至少在某种程度上,我们没有我不相信我们能做到)。但鲍里斯建议,在其中一个错误线程中,允许它出现:无输入-基本上只是将它们转换为<div>s,而不是“有点被替换”的元素。