我可以在输入字段上使用：之前或：之后伪元素吗？

小开

最佳答案

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

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

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

如果使用jQuery，您可以使用

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

API文档

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

小开

`:before`和`:after`在容器内渲染

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

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

如果你问我，如果某些浏览器确实在非容器元素上显示这两个伪元素，那是bug，是非标准一致性。规范直接谈论元素内容…

w3c规范

如果我们仔细阅读的规范，它实际上表示它们被插入里面一个包含元素：

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

看到了吗？元素的文档树内容。据我所知，这意味着在是一个容器。

小开

我发现这篇文章，因为我有同样的问题，这是为我工作的解决方案。与替换输入的值相反，只是删除它并绝对在它后面放置一个相同大小的跨度，跨度可以有一个: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>

小开

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

<input type="checkbox" />

工作正常，与

<input type="radio" />

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

小开

根据CSS 2.1规范中的注意，该规范“没有完全定义：之前和：之后与替换元素（例如超文本标记语言中的IMG）的交互。这将在未来的规范中更详细地定义。”虽然input不再是真正的替换元素，但基本情况没有改变：:before和:after对它的影响未指定，通常没有影响。

解决方案是找到一种不同的方法来解决您试图以这种方式解决的问题。将生成的内容放入文本输入控件将非常具有误导性：对用户来说，它似乎是控件中初始值的一部分，但它不能被修改-因此它似乎是控件开始时强制的东西，但它不会作为表单数据的一部分提交。

小开

我使用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}

查看代码

小开

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

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 }

小开

我发现你可以这样做：

.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>

您需要有一个div父级，它接受填充和：之后。第一个父级需要是相对的，第二个div应该是绝对的，这样你就可以设置后面的位置。

小开

你必须在输入周围有某种包装器才能使用之前或之后伪元素。这是一个小提琴，它在输入的包装器div上有一个之前，然后将之前放在输入内部-或者至少看起来像它。显然，这是一个工作，但在紧要关头有效并适合响应。如果你需要放一些其他内容，你可以很容易地将其设置为之后。

工作小提琴

输入中的美元符号作为伪元素：

超文本标记语言：

<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;}

小开

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

它不适用于自闭合元素。

顺便说一下，自关闭的元素（例如img/hr/输入）也称为“替换元素”，因为它们被替换为各自的内容。“外部对象”因为没有更好的术语。更好的阅读这里

小开

这是另一种方法（假设您可以控制超文本标记语言）：在输入之后添加一个空的<span></span>，并使用input.mystyle + span:after在CSS中定位

.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>。

小开

如果您尝试使用：之前和：之后设置输入元素的样式，那么您尝试模拟CSS堆栈中其他跨度、div甚至元素的效果。的可能性很大

正如Robert Koritnik的回答所指出的那样：之前和之后只能应用于容器元素，输入元素不是容器。

然而，超文本标记语言5引入了按钮元素，它是一个容器，其行为类似于输入[type="提交|重置"]元素。

    <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>

小开

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

然而，CSS工作组正在考虑明确允许::before和::after，以防input有appearance: none。

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

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

实际上在输入上指定伪元素需要指定输入的内部结构，至少在某种程度上，我们还没有设法做到这一点（我不相信我们能做到）。但是鲍里斯建议，在其中一个错误线程中，允许它出现：无输入-基本上只是将它们转换为
s，而不是“有点替代”元素。

小开

尝试下一个：

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>

小开

总结

它不适用于<input type="button">，但它适用于<input type="checkbox">。

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

超文本标记语言：

<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;}

小开

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

小开

纯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-textDoes'nt matter what it is (*), I use it.--><span></span>

（*）有限的解决方案：

你必须希望有一个下面的dom元素，
您必须希望没有其他输入字段跟随您的输入字段。

但在大多数情况下，我们知道我们的代码，所以这个解决方案看起来很高效，100%CSS和0%jQuery。

小开

像:after、:before这样的伪元素仅适用于容器元素。像<input/>、<img>等在一个地方开始和关闭的元素不是容器元素，因此不支持伪元素。一旦你将伪元素应用于像<div>这样的容器元素，如果你检查代码（见下图），你就可以理解我的意思。实际上伪元素是在容器元素内部创建的。这在<input>或<img>的情况下是不可能的

小开

这里最大的误解是单词before和after的意思。它们的没有确实指元素本身，但指元素中的内容。所以element:before在内容之前，element:after在内容之后，但两者仍然在原始元素中。

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

没有引用外面元素的伪元素。

在另一个宇宙中，这些伪元素可能会被称为其他东西，以使这种区别更清楚。甚至有人可能提出了一个真正在元素之外的伪元素。到目前为止，这个宇宙中的情况并非如此。

小开

虽然指出Firefox不允许::after和::before内容用于不能显示任何内容的元素的解释是非常正确的，但它似乎仍然非常适合这条规则：

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

由于::after是重新设计复选框或无线电框没有样式的唯一方法，它引入了更多不相关的标记，如尾随跨度或标签，我认为可以强制Firefox允许显示::bef和::after内容，尽管没有规范。

小开

带有后和前的切换器示例只需将您的输入包装在div块

.fm-form-control {position: relative;margin-top: 25px;margin-bottom: 25.2px;}

.fm-switcher {display: none;}.fm-switcher:checked + .fm-placeholder-switcher:after {background-color: #94c6e7;}.fm-switcher:checked + .fm-placeholder-switcher:before {left: 24px;}.fm-switcher[disabled] + .fm-placeholder-switcher {cursor: not-allowed;}.fm-switcher[disabled] + .fm-placeholder-switcher:before {background-color: #cbd0d3;}.fm-switcher[disabled] + .fm-placeholder-switcher:after {background-color: #eaeded;border-color: #cbd0d3;}
.fm-placeholder-switcher {padding-left: 53px;cursor: pointer;line-height: 24px;}.fm-placeholder-switcher:before {position: absolute;content: '';left: 0;top: 50%;width: 20px;height: 20px;margin-top: -10px;margin-left: 2px;background-color: #2980b9;z-index: 2;-moz-transition: all 0.15s ease-in-out;-o-transition: all 0.15s ease-in-out;-webkit-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;border-radius: 12px;}.fm-placeholder-switcher:after {position: absolute;content: '';left: 0;top: 50%;width: 48px;height: 20px;margin-top: -12px;background-color: #ffffff;z-index: 1;border-radius: 12px;border: 2px solid #bdc3c7;-moz-transition: all 0.15s ease-in-out;-o-transition: all 0.15s ease-in-out;-webkit-transition: all 0.15s ease-in-out;transition: all 0.15s ease-in-out;}

<div class='fm-form-control'><input class='fm-switcher' id='switcher_id' type='checkbox'><label class='fm-placeholder-switcher' for='switcher_id'>Switcher</label></div>

小开

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

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

这是所有输入类型中的全面演示，清楚地显示了哪些与::before伪元素兼容（在这种情况下）。

总而言之，这是可以呈现伪内容的所有输入类型的列表：

复选框
颜色
日期
日期本地时间
文件
图像
月
无线电
范围
时间
周

我可以在输入字段上使用：之前或：之后伪元素吗？

:before和:after在容器内渲染

w3c规范

`:before`和`:after`在容器内渲染