我试图在输入字段上使用: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仅适用于可以具有子节点的节点,因为它们将新节点作为第一个或最后一个节点插入。

其他回答

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

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

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

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

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

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

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

奇怪的是,它可以处理某些类型的输入。至少在Chrome中,

<input type="checkbox" />

工作正常,与

<input type="radio" />

只是type=text和其他一些不起作用。

如果您试图使用: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>

我发现你可以这样做:

.submit.btn输入{填充:11px 28px 12px 14px;背景:#004990;边框:无;颜色:#fff;}.提交.btn{边框:无;颜色:#fff;font-family:'Open Sans',Sans-serif;字体大小:1em;最小宽度:96px;显示:内联块;位置:相对;}.submit.btn:之后{内容:“>”;宽度:6px;高度:17px;位置:绝对;右:36px;颜色:#fff;顶部:7px;}<div class=“submit”><div class=“btn”><input value=“发送”type=“提交”/></div></div>

您需要有一个div父级,它接受padding和:after。第一个父级需要是相对的,第二个div应该是绝对的,这样就可以设置after的位置。