我可以在输入字段上使用：before或：after伪元素吗？

我试图在input字段上使用:after CSS伪元素，但是它不起作用。 如果我使用span ，它可以正常工作。

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

这有效（在“ buu！”之后和“更多”之前放入笑脸）

<span class="mystyle">buuu!</span>a some more

这是行不通的-它只将someValue涂成红色，但没有笑脸。

<input class="mystyle" type="text" value="someValue">

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

注意：我无法在input周围添加span ，因为它是由第三方控件生成的。

---

#1楼

我发现这个帖子的原因是我遇到了同样的问题，这是对我有用的解决方案。 与其替换输入的值，不如将其删除并在其后绝对放置一个相同大小的跨度，该跨度可以具有: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>

---

#2楼

奇怪的是，它适用于某些类型的输入。 至少在Chrome中，

<input type="checkbox" />

工作正常，与

<input type="radio" />

只是type=text和其他一些无效。

---

#3楼

根据CSS 2.1规范中的注释 ，该规范“并未完全定义：before和：after与替换元素（例如HTML中的IMG）的交互。 尽管input不再是真正的替换元素，但基本情况没有改变:before和:after对它的影响未指明，并且通常不起作用。

解决方案是找到一种不同的方法来解决您要解决的问题。 将生成的内容放入文本输入控件中会产生很大的误导性：对用户而言，它似乎是控件中初始值的一部分，但无法修改-因此，它似乎是在开始时就被强制执行的操作。控件，但它不会作为表单数据的一部分提交。

---

#4楼

我使用background-image为必填字段创建了红点。

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

---

#5楼

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

它也不打算用于替换后的元素，例如表单元素 （输入）和图像元素 。

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

但是，如果使用jQuery ，则可以使用

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

.after上的API文档

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

---

#6楼

您不能在输入元素中放置伪元素，但是可以像占位符一样放置阴影元素！

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

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

更新 ：上面的代码仅适用于CSS预处理器（SASS，LESS ...），而无需使用预处理器：

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

---

#7楼

我发现您可以这样做：

 .submit .btn input { padding:11px 28px 12px 14px; background:#004990; border:none; color:#fff; } .submit .btn { border:none; color:#fff; font-family: 'Open Sans', sans-serif; font-size:1em; min-width:96px; display:inline-block; position:relative; } .submit .btn:after { content:">"; width:6px; height:17px; position:absolute; right:36px; color:#fff; top:7px; } 

 <div class="submit"> <div class="btn"> <input value="Send" type="submit" /> </div> </div> 

您需要有一个带填充和：after的div父级。 第一个父级必须是相对的，第二个div应该是绝对的，以便您可以设置之后的位置。

---

#8楼

您必须在输入周围有某种包装，才能使用伪元素之前或之后。 这是一个小提琴，在输入的包装div上具有一个before，然后将其放置在输入中-至少看起来像这样。 显然，这是一种变通方法，但在紧要关头很有效，因此很容易响应。 如果您需要添加其他内容，则可以轻松地进行设置。

工作小提琴

输入中的美元符号作为伪元素： http : //jsfiddle.net/kapunahele/ose4r8uj/1/

HTML：

<div class="test">
    <input type="text"></input>
</div>

CSS：

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

---

#9楼

:before和:after应用于容器内部，这意味着您可以将其用于带有end标签的元素。

它不适用于自动关闭的元素。

附带说明，自动关闭的元素（例如img / hr / input）也称为“替换元素”，因为它们已被其各自的内容替换。 “外部对象”缺乏更好的用语。 更好的阅读这里

---

#10楼

这是另一种方法 （假设您可以控制HTML）：在输入之后添加一个空的<span></span> ，并使用input.mystyle + span:after在CSS input.mystyle + span:after

 .field_with_errors { display: inline; color: red; } .field_with_errors input+span:after { content: "*" } 

 <div class="field_with_errors">Label:</div> <div class="field_with_errors"> <input type="text" /><span></span> </div> 

我在AngularJS中使用这种方法，因为它会将.ng-invalid类自动添加到<input>表单元素和表单中，而不是添加到<label> 。

---

#11楼

您可以在jQuery父块中使用after或before元素。 像这样：

$(yourInput).parent().addClass("error-form-field");

---

#12楼

如果尝试使用：before和：after设置输入元素的样式，则很可能是在模仿其他span，div甚至CSS堆栈中的元素的效果。

正如罗伯特·科里特尼克（Robert Koritnik）的答案所指出的那样：：before和：after只能应用于容器元素，而输入元素则不是容器。

但是，HTML 5引入了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>

---

#13楼

正如其他人所解释的那样， input是有点替换的void元素，因此大多数浏览器不允许您在其中生成::before或::after伪元素。

但是，CSS工作组正在考虑显式地允许::before和::after ，以防input appearance: none 。

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

Safari和Chrome都允许在表单输入中使用伪元素。 其他浏览器则没有。 我们曾考虑删除它，但是使用计数器正在记录使用它的〜.07％页面，这是我们最大删除阈值的20倍。

实际上，在输入上指定伪元素将需要至少指定输入的内部结构，而我们尚未设法做到这一点（我不确定我们可以做到）。 但鲍里斯（Boris）建议，在其中一个bug线程中，允许它出现：无输入-基本上只是将它们转换为<div>，而不是“ kinda替换”元素。

---

#14楼

尝试下一个：

 label[for="userName"] { position: relative; } label[for="userName"]::after { content: '[after]'; width: 22px; height: 22px; display: inline-block; position: absolute; right: -30px; } 

 <label for="userName"> Name: <input type="text" name="userName" id="userName"> </label> 

---

#15楼

摘要

它不适用于<input type="button"> ，但是可以很好地与<input 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;
}

---

#16楼

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

---

#17楼

:before和:after在容器内渲染

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

---

伪元素只能在容器元素上定义（或者最好仅支持）。 因为它们的呈现方式在容器本身内作为子元素。 input不能包含其他元素，因此不支持它们。 另一方面，也是表单元素的button支持它们，因为它是其他子元素的容器。

如果您问我，如果某个浏览器的确在非容器元素上显示了这两个伪元素，那是一个错误，并且是非标准的一致性。 规范直接讨论元素的内容...

W3C规格

如果我们仔细阅读说明书 ，它实际上说，他们被插入含有的元素：

作者使用：before和：after伪元素指定生成内容的样式和位置。 顾名思义，：before和：after伪元素指定元素的文档树内容之前和之后的内容位置。 “ content”属性与这些伪元素一起指定了要插入的内容。

看到？ 元素的文档树内容 。 据我了解，这意味着在容器内。

---

#18楼

纯CSS的可行解决方案：

诀窍是假设文本字段后有一个dom元素。

 /* * The trick is here: * this selector says "take the first dom element after * the input text (+) and set its before content to the * value (:before). */ input#myTextField + *:before { content: "👍"; } 

 <input id="myTextField" class="mystyle" type="text" value="someValue" /> <!-- There's maybe something after a input-text Does'nt matter what it is (*), I use it. --> <span></span> 

（*）解决方案有限，但：

• 您必须希望有以下dom元素，
• 您必须希望没有其他输入字段跟随您的输入字段。

但是在大多数情况下，我们知道我们的代码，因此此解决方案似乎很有效，并且CSS的使用率为100％，jQuery为0％。

---

#19楼

诸如:after ， :before类的伪元素仅适用于容器元素。 在单个位置开始和关闭的元素（例如<input/> ， <img>等）不是容器元素，因此不支持伪元素。 将伪元素应用于诸如<div>类的容器元素后，如果您检查代码（参见图片），就可以理解我的意思。 实际上，伪元素是在容器元素内部创建的。 在<input>或<img>情况下这是不可能的

---

#20楼

这里最大的误区是的话的含义before和after 。 它们不是指元素本身，而是指元素中的内容 。 因此element:before在内容之前，而element:after在内容之后，但两者仍在原始元素内。

input元素在CSS视图中没有内容，因此也没有:before或:after伪内容。 许多其他void或替换元素也是如此。

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

在不同的宇宙中，这些伪元素可能被称为其他名称，以使这种区分更加清晰。 甚至有人可能提出了一个伪元素，而该伪元素确实在元素之外。 到目前为止，在这个宇宙中情况并非如此。