我试图在输入字段上使用: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">

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

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


当前回答

当我遇到同样的问题时,我发现了这篇文章,这是对我有效的解决方案。与替换输入的值相反,只需删除它并在其后面绝对放置一个大小相同的span,span可以使用您选择的图标字体将:before伪类应用于它。

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</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的位置。

:在容器内渲染之前和之后

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


伪元素只能在容器元素上定义(或者更好地说,只支持)。因为它们的渲染方式在容器本身作为子元素。输入不能包含其他元素,因此不支持它们。另一方面,也是表单元素的按钮支持它们,因为它是其他子元素的容器。

如果你问我,如果某些浏览器确实在非容器元素上显示了这两个伪元素,那就是一个bug和一个非标准一致性。规范直接涉及元素内容。。。

W3C规范

如果我们仔细阅读规范,它实际上表明它们被插入到包含元素中:

作者使用:before和:after伪元素指定生成内容的样式和位置。正如它们的名称所示,:before和:after伪元素指定元素文档树内容前后的内容位置。“content”属性与这些伪元素一起指定插入的内容。

看见元素的文档树内容。据我理解,这意味着在容器内。

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

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

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

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

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

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

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

:after和:before在Internet Explorer 7及以下版本中不受任何元素的支持。

它也不能用于替换的元素,如表单元素(输入)和图像元素。

换句话说,使用纯CSS是不可能的。

但是,如果使用jquery,则可以使用

$(".mystyle").after("add your smiley here");

之后的API文档

使用javascript附加内容。这将适用于所有浏览器。