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

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

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


当前回答

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

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

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

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

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

其他回答

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

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

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 }

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

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

我发现你可以这样做:

.submit.btn输入{填充:11px 28px 12px 14px;背景:#004990;边框:无;颜色:#fff;}.提交.btn{边框:无;颜色:#fff;font-family:'Open Sans',Sans-serif;字体大小:1em;最小宽度:96px;显示:内联块;位置:相对;}.submit.btn:之后{内容:“>”;宽度:6px;高度:17px;位置:绝对;右:36px;颜色:#fff;顶部:7px;}<div class=“submit”><div class=“btn”><input value=“发送”type=“提交”/></div></div>

您需要有一个div父级,它接受padding和:after。第一个父级需要是相对的,第二个div应该是绝对的,这样就可以设置after的位置。

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

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

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

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

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