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

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

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


当前回答

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

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

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

其他回答

如果您试图使用:before和:after来设置输入元素的样式,那么很可能您试图模仿CSS堆栈中其他span、div甚至某个元素的效果。

正如Robert Koritnik的回答所指出的,:before和:after只能应用于容器元素,而输入元素不是容器。

然而,HTML5引入了button元素,它是一个容器,其行为类似于input[type=“submit | reset”]元素。

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

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

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

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

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

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

之后的API文档

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

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

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

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

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

<input type="checkbox" />

工作正常,与

<input type="radio" />

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

下一步尝试:

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