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

Can I use a :before or :after pseudo-element on an input field?

提问by matra

I am trying to use the :afterCSS pseudo-element on an inputfield, but it does not work. If I use it with a span, it works OK.

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

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

This works (puts the smiley after "buu!" and before "some more")

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

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

This does not work - it only colors someValue in red, but there is no smiley.

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

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

What am I doing wrong? should I use another pseudo-selector?

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

Note: I cannot add a spanaround my input, because it is being generated by a third-party control.

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

采纳答案by Alex

:afterand :beforeare not supported in Internet Explorer 7 and under, on any elements.

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

It's also not meant to be used on replaced elements such as form elements(inputs) and image elements.

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

In other words it's impossiblewith pure CSS.

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

However if using jqueryyou can use

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

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

API docs on .after

.after 上的 API 文档

To append your content with javascript. This will work across all browsers.

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

回答by Robert Koritnik

:beforeand :afterrender inside a container

:before并:after在容器内渲染

and <input> can not contain other elements.

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

---

---

Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is withinthe container itself as a child element. inputcan not contain other elements hence they're not supported. A buttonon the other hand that's also a form element supports them, because it's a container of other sub-elements.

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

If you ask me, if some browser doesdisplay these two pseudo-elements on non-container elements, it's a bug and a non-standard conformance. Specification directly talks about element content...

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

W3C specification

W3C规范

If we carefully read the specificationit actually says that they are inserted insidea containing element:

如果我们仔细阅读规范，它实际上说它们被插入到一个包含元素中：

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

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

See? an element's document tree content. As I understand it this means withina container.

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

回答by vals

Oddly, it works with some types of input. At least in Chrome,

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

<input type="checkbox" />

works fine, same as

工作正常，与

<input type="radio" />

It's just type=textand some others that don't work.

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

回答by Blazemonger

Here's another approach(assuming you have control of the HTML): add an empty <span></span>right after the input, and target that in CSS using input.mystyle + span:after

这是另一种方法（假设您可以控制 HTML）：<span></span>在输入之后添加一个空的，并在 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>

I'm using this approach in AngularJS because it will add .ng-invalidclasses automatically to <input>form elements, and to the form, but not to the <label>.

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

回答by CatalinBerta

:beforeand :afterare applied inside a container, which means you can use it for elements with an end tag.

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

It doesn't apply for self-closing elements.

它不适用于自闭合元素。

On a side note, elements which are self-closing (such as img/hr/input) are also known as 'Replaced Elements', as they are replaced with their respective content. "External Objects" for the lack of a better term. A better read here

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

回答by Veiko J??ger

I used the background-imageto create the red dot for required fields.

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

View on Codepen

在 Codepen 上查看

回答by Shankar Cabus

You can't put a pseudo element in an input element, but can put in shadow element, like a placeholder!

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

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

To make it work in other browsers, use :-moz-placeholder, ::-moz-placeholderand :-ms-input-placeholderin different selectors. Can't group the selectors, because if a browser doesn't recognize the selector invalidates the entire statement.

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

UPDATE: The above code works only with CSS pre-processor (SASS, LESS...), without pre-processors use:

更新：以上代码仅适用于 CSS 预处理器（SASS、LESS...），不使用预处理器：

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

回答by Pons Purushothaman

Pseudo elements like :after, :beforeare only for container elements. Elements starting and closing in a single place like <input/>, <img>etc are not container elements and hence pseudo elements are not supported. Once you apply a pseudo element to container element like <div>and if you inspect the code(see the image) you can understand what I mean. Actually the pseudo element is created inside the container element. This is not possible in case of <input>or <img>

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

回答by Pons Purushothaman

A working solution in pure CSS:

纯 CSS 的工作解决方案：

The trick is to suppose there's a dom element after the text-field.

诀窍是假设文本字段后面有一个 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>

(*) Limited solution, though:

(*) 有限的解决方案，但：

• you have to hope that there's a following dom element,
• you have to hope no other input field follows your input field.

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

But in most cases, we know our code so this solution seems efficient and 100% CSS and 0% jQuery.

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

回答by Morgan Feeney

I found this post as I was having the same issue, this was the solution that worked for me. As opposed to replacing the input's value just remove it and absolutely position a span behind it that is the same size, the span can have a :beforepseudo class applied to it with the icon font of your choice.

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