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

摘要

它不能使用<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;
}

我有另一个想法，用这个代替：

<div>
<input type="text"></input>text can be entered here</div>

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

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

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

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

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

According to a note in the CSS 2.1 spec, the specification “does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” Although input is not really a replaced element any more, the basic situation has not changed: the effect of :before and :after on it in unspecified and generally has no effect.

The solution is to find a different approach to the problem you are trying to address this way. Putting generated content into a text input control would be very misleading: to the user, it would appear to be part of the initial value in the control, but it cannot be modified – so it would appear to be something forced at the start of the control, but yet it would not be submitted as part of form data.

这里最大的误区，就是这些词的含义before和after。它们不是指元素本身，而是指元素中的内容。所以，element:before是之前的内容，并且element:after是内容之后，但两者仍然是原来的元素中。

该input元件具有在CSS视图中没有的内容，所以不具有:before或:after伪内容。许多其他void或替换元素也是如此。

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

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

正如其他人所解释的那样，inputs是有点替换的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替换”元素。

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

<input type="checkbox" />

工作正常，与

<input type="radio" />

只是这样type=text，还有一些是行不通的。

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

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

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 }

这是另一种方法（假设您拥有HTML的控制权）：<span></span>在输入之后添加一个空白，然后使用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>。

我使用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上查看

:before并:after在容器内渲染

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

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

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

W3C规格

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

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

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

:after并且:before在Internet Explorer 7及更高版本中的任何元素上均不受支持。

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

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

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

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

.after上的API文档

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