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

Question

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

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

这有效（将笑脸放在“buu！”之后和“some more”之前）

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

这不起作用 - 它只将 someValue 着色为红色，但没有笑脸。

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

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

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

Answer 1

:before 和 :after 在容器内渲染

和 不能包含其他元素。

---

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

如果你问我，如果某些浏览器确实在非容器元素上显示这两个伪元素，那么这是一个错误并且不符合标准。规范直接讲元素内容...

W3C规范

如果我们仔细阅读规范实际上说它们被插入内部包含元素：

作者使用 :before 和 :after 伪元素指定生成内容的样式和位置。正如其名称所示，:before 和 :after 伪元素指定元素的文档树内容之前和之后的内容位置。 'content' 属性与这些伪元素一起指定插入的内容。

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

Answer 2

Internet Explorer 7 及更低版本中的任何元素都不支持 :after 和 :before。

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

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

但是，如果使用 jquery 您可以使用

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

API 文档 .after

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

Answer 3

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

<input type="checkbox" />

工作正常，与它相同

<input type="radio" />

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

Answer 4

这是另一种方法（假设您可以控制 HTML）：添加一个空的 < /code> 就在输入之后，并使用 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 类添加到 表单元素和表单中，但不会添加到 <代码><标签>。

Answer 5

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

它不适用于自关闭元素。

顺便说一句，自关闭的元素（例如 img/hr/input）也称为“替换元素”，因为它们被替换为各自的内容。 “外部对象”缺乏更好的术语。更好地阅读此处

Answer 6

这里最大的误解是before和after这两个词的含义。它们不引用元素本身，而是引用元素中的内容。因此 element:before 位于内容之前，而 element:after 位于内容之后，但两者仍在原始元素内。

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

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

在不同的宇宙中，这些伪元素可能会被称为其他名称，以使这种区别更加清晰。有人甚至可能提出了一个真正位于元素之外的伪元素。到目前为止，这个宇宙还没有出现这种情况。

Answer 7

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

片段演示：

body {
  background-color: rgb(0,159,214);
  font: normal 1em Helvetica,Arial;
  padding: 2em;
}
input[type="text"], textarea {
  background-color: #eee;
  border: none;
  border-radius: .125em;
  display: block;
  font: inherit;
  font-size: 1.5em;
  line-height: 2em;
  margin: .5em auto;
  padding: 0 .5em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
}
input[type="text"][required] {
  background-image: linear-gradient(45deg, transparent, transparent 50%, red 50%, red 100%);
  background-position: top right;
  background-size: .5em .5em;
  background-repeat: no-repeat;
}
textarea[required] {
  background-image: radial-gradient(red 20%, transparent 25%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

<input type="text" placeholder="Required" required>

<textarea placeholder="Required" required></textarea>

或者在Codepen上查看

Answer 8

您不能将伪元素放入输入元素中，但可以放入影子元素，例如占位符！

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 }

Answer 9

纯 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: "

Answer 10

我发现这篇文章是因为我遇到了同样的问题，这是对我有用的解决方案。与替换输入的值相反，只需将其删除并绝对在其后面放置一个相同大小的跨度，该跨度可以使用您选择的图标字体应用一个 :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>

Answer 11

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

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

这是一个全面演示所有输入类型，一目了然显示哪些与（在本例中）::before 伪元素兼容。

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

1. 复选框
2. 颜色
3. 日期
4. 日期时间本地
5. 文件
6. 图像
7. 月份
8. 无线电
9. 范围
10. 时间
11. 周

Answer 12

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

但是，CSS 工作组正在考虑明确允许 ::before 和 ::after，以防 input 具有 appearance: none< /代码>。

来自 https://lists.w3.org/Archives/Public/ www-style/2016Mar/0190.html,

Safari 和 Chrome 都允许在其表单输入上使用伪元素。
其他浏览器则不然。我们考虑删除这个，但是
use-counter 正在记录大约 0.07% 的页面使用它，这是我们最大值的 20 倍
去除阈值。

实际上，在输入上指定伪元素需要指定
至少在某种程度上，我们还没有了解输入的内部结构
还设法做到了（而且我不相信我们*可以*做到）。但鲍里斯
建议，在错误线程之一中，允许它出现：无
输入 - 基本上只是将它们变成

，而不是
“有点被替换”的元素。

Answer 13

根据 CSS 2.1 规范中的注释，该规范“不完全定义 :before 和 :after 与替换元素（例如 HTML 中的 IMG）的交互。这将在未来的规范中进行更详细的定义。”虽然 input 不再是真正的替换元素，但基本情况没有改变：:before 和 :after 对它的影响未指定，通常没有效果。

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

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

Answer 15

您必须在输入周围有某种包装器才能使用 before 或 after 伪元素。这是一个小提琴，它在输入的包装 div 上有一个 before，然后将 before 放在输入内部 - 或者至少看起来像这样。显然，这是一种解决方法，但在紧要关头很有效，并且有助于做出响应。如果您需要添加一些其他内容，您可以轻松地将其设为 after。

工作小提琴

输入中的美元符号作为伪元素：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;
}

Answer 16

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

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

Answer 17

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

Answer 18

虽然指出 Firefox 不允许无法显示任何内容的元素使用 ::after 和 ::before 内容的行为的解释是非常正确的，但它似乎仍然可以完美地使用此规则

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

：重新设置复选框或单选框的样式而不引入更多不相关的标记（例如尾随范围或标签）的唯一方法，我认为强制 Firefox 允许显示 ::before 和 ::after 内容是可以的，尽管不符合规格。

Answer 19

我发现你可以这样做：

.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 父级来接受填充和 :after。
第一个父级需要是相对的，第二个 div 应该是绝对的，这样您就可以设置后面的位置。

Answer 20

摘要

它不适用于 ，但可以与 < 配合使用。 /代码>。

小提琴：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;
}

Answer 21

带有 after 和 before 的切换器示例
只需将您的输入包装在 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>