我试图在输入字段上使用: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"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

要使其在其他浏览器中工作,请在不同的选择器中使用:-moz占位符、::-moz placeholder和:-ms input placeholder。无法对选择器进行分组,因为如果浏览器无法识别选择器,则整个语句将无效。

更新:以上代码仅适用于CSS预处理器(SASS、LESS…),不使用预处理器:

input[type="text"]::-webkit-input-placeholder:before { // your code }

其他回答

伪元素如:after、:before仅用于容器元素。在单个位置开始和结束的元素,如<input/>、<img>等,都不是容器元素,因此不支持伪元素。一旦将伪元素应用于容器元素(如<div>),如果检查代码(参见图片),就可以理解我的意思。实际上,伪元素是在容器元素内部创建的。这在<input>或<img>的情况下是不可能的

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

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

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

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

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

之后的API文档

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

正如其他人所解释的,输入有点被替换为空元素,所以大多数浏览器不允许您在其中生成::before或::after伪元素。

然而,CSS工作组正在考虑在输入具有外观:none的情况下显式允许::before和::after。

从…起https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html,

Safari和Chrome都允许在表单输入上使用伪元素。其他浏览器没有。我们曾考虑删除此项,但使用计数器正在记录大约0.07%的使用它的页面,这是我们最大值的20倍移除阈值。实际上,在输入上指定伪元素需要指定输入的内部结构至少在某种程度上,我们没有我不相信我们能做到)。但鲍里斯建议,在其中一个错误线程中,允许它出现:无输入-基本上只是将它们转换为<div>s,而不是“有点被替换”的元素。

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

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

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

您不能在输入元素中放置伪元素,但可以放置阴影元素,如占位符!

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

要使其在其他浏览器中工作,请在不同的选择器中使用:-moz占位符、::-moz placeholder和:-ms input placeholder。无法对选择器进行分组,因为如果浏览器无法识别选择器,则整个语句将无效。

更新:以上代码仅适用于CSS预处理器(SASS、LESS…),不使用预处理器:

input[type="text"]::-webkit-input-placeholder:before { // your code }