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

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

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


当前回答

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

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上查看

其他回答

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

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上查看

尽管有解释指出Firefox不允许::after和::before内容用于无法显示任何内容的元素的行为是正确的,但这一规则似乎仍然适用:

input[type=checkbox] {
    -moz-appearance: initial;
}

由于::after是重新设置复选框或单选框样式的唯一方法,而不会引入更多无关的标记,如尾随跨度或标签,我认为可以强制Firefox允许显示::before和::aft内容,尽管不符合规范。

:before和:after仅适用于可以具有子节点的节点,因为它们将新节点作为第一个或最后一个节点插入。

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

<input type="checkbox" />

工作正常,与

<input type="radio" />

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

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

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

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

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

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