我试图在输入字段上使用: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应用于容器内部,这意味着您可以将其用于带有结束标记的元素。

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

另一方面,自动关闭的元素(如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,而不是“有点被替换”的元素。

前后切换开关示例只需将输入包装在div块上

.fm表单控件{位置:相对;页边空白:25px;边距底部:25.2px;}.fm切换器{显示:无;}.fm切换开关:选中+.fm占位符切换开关:在之后{背景色:#94c6e7;}.fm切换器:已选中+.fm占位符切换器{左:24px;}.fm切换器[已禁用]+.fm占位符切换器{游标:不允许;}.fm切换器[已禁用]+.fm占位符切换器:之前{背景色:#cbd0d3;}.fm切换器[已禁用]+.fm占位符切换器:之后{背景色:#eaeeded;边框颜色:#cbd0d3;}.fm占位符切换器{左填充:53px;光标:指针;线条高度:24px;}.fm占位符切换器:之前{位置:绝对;内容:“”;左:0;顶部:50%;宽度:20px;高度:20px;页边空白:-10px;左边距:2px;背景色:#2980b9;z指数:2;-moz转换:所有0.15s都易于进出;-o型转换:所有0.15s都易于进出;-webkit转换:所有0.15s都易于输入输出;过渡:所有0.15s均缓进缓出;边框半径:12px;}.fm占位符切换器:在之后{位置:绝对;内容:“”;左:0;顶部:50%;宽度:48px;高度:20px;页边空白:-12px;背景色:#ffffff;z指数:1;边框半径:12px;边框:2px实心#bdc3c7;-moz转换:所有0.15s都易于进出;-o型转换:所有0.15s都易于进出;-webkit转换:所有0.15s都易于输入输出;过渡:所有0.15s均缓进缓出;}<div class='fm表单控件'><input class=‘m-switcher‘id=‘switcher_id‘type=‘checkbox‘><label class='m-placeholder-switcher'for='switcher_id'>切换器</label></div>

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

<input type="checkbox" />

工作正常,与

<input type="radio" />

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

我使用背景图像为必填字段创建了红点。

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

在Codepen上查看