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

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

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


当前回答

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

<input type="checkbox" />

工作正常,与

<input type="radio" />

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

其他回答

总结

它不适用于<inputtype=“button”>,但适用于<输入type=“checkbox”>。

小提琴:http://jsfiddle.net/gb2wY/50/

HTML格式:

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

CSS:

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

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

下一步尝试:

label[for=“userName”]{位置:相对;}label[for=“userName”]::之后{content:'[after]';宽度:22px;高度:22px;显示:内联块;位置:绝对;右:-30像素;}<label for=“userName”>姓名:<input type=“text”name=“userName”id=“userName“></label>

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

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

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

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

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

之后的API文档

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

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

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


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

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

W3C规范

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

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

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