我试图在输入字段上使用: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伪内容。这适用于许多其他无效或替换的元素。

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

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

其他回答

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

<input type="checkbox" />

工作正常,与

<input type="radio" />

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

当我遇到同样的问题时,我发现了这篇文章,这是对我有效的解决方案。与替换输入的值相反,只需删除它并在其后面绝对放置一个大小相同的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>

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

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

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

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

这里有另一种方法(假设您可以控制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>中。