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

:after 和 :before 在Internet Explorer 7和之下的任何元素上都不支持。

它也不用于替换元素,如 表单元素 (输入)和 图像元素 .

换句话说就是 不可能的 使用纯css。

但是如果使用 jquery 你可以使用

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

API docs on .after

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

:before 和 :after 在容器内渲染

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

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

如果你问我 做 在非容器元素上显示这两个伪元素,这是一个bug和一个非标准一致性。规范直接讨论元素内容…

W3C规范

如果我们仔细阅读 the specification 它实际上说它们是插入的 里面 包含元素:

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

看到了吗? 元素的文档树 内容 . 据我所知这意味着 在内部 容器。

奇怪的是,它可以处理某些类型的输入。 至少在铬合金方面,

<input type="checkbox" />

工作正常,与

<input type="radio" />

只是 type=text 还有一些不起作用的。

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

它不适用于自闭元件。

另一方面,自动关闭的元素(如img/hr/input)也被称为“替换元素”,因为它们被各自的内容替换了。”“外部对象”是因为缺少一个更好的术语。更好的阅读 here

Here's another approach (假设您控制了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
}

View on Codepen

不能在输入元素中放入伪元素,但可以像占位符一样放入阴影元素!

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 }

我发现了这个帖子,因为我有同样的问题,这是对我有效的解决方案。与替换输入值相反,只需删除它并在其后面绝对放置一个大小相同的跨距,跨距可以有 :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>

伪元素,如 :after , :before 仅用于容器元素。在一个地方开始和结束的元素 <input/> , <img> etc不是容器元素,因此不支持伪元素。一旦将伪元素应用于容器元素 <div> 如果你检查代码(见图片),你就能理解我的意思。实际上,伪元素是在容器元素中创建的。在这种情况下这是不可能的 <input> 或 <IMG & GT;

纯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元素,
• 您必须希望没有其他输入字段跟随您的输入字段。

但在大多数情况下,我们知道我们的代码,所以这个解决方案似乎是有效的,100%css和0%jquery。

根据A note 在css 2.1规范中,规范没有完全定义:before和:after与替换元素(例如html中的img)的交互。这将在未来的规范中进行更详细的定义。虽然 input 不再是真正的替代元素,基本情况没有改变:效果 :before 和 :after 对它没有明确规定,一般也没有影响。

解决方法是找到一种不同的方法来解决你试图用这种方法解决的问题。将生成的内容放入文本输入控件将是非常误导的:对用户来说,它似乎是控件初始值的一部分,但不能修改,因此它在控件开始时似乎是强制的,但它不会作为f的一部分提交。ORM数据

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

然而,css工作组正在考虑明确允许 前: 和 后: 万一 输入 有 appearance: none .

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

safari和chrome都允许在表单输入上使用伪元素。 其他浏览器没有。我们考虑过删除它,但是 使用计数器正在记录大约0.07%的页面使用它,这是我们最大值的20倍 移除阈值。

在输入上实际指定伪元素需要指定 输入的内部结构,至少在某种程度上,我们还没有 已经做到了(我不相信我们能做到)。但是鲍里斯 建议,在一个错误线程中,允许它出现在外观上:无 输入-基本上只是将它们转换为<div>s,而不是 “有点被取代”的元素。

为了使用before或after伪元素,必须在输入周围使用某种包装器。这里有一个fiddle,它在一个输入的包装器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;
}

尝试下一步:

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>

如果您尝试使用:before和:after设置输入元素的样式,则很可能您正在尝试 模拟css堆栈中其他span、div甚至元素的效果。

正如罗伯特·科里特尼克的回答所指出的那样:before和:after只能应用于 容器元素 输入元素不是容器。

然而,HTML5引入了 按钮 元素,它是一个容器,其行为类似于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>

总结

它不适用于 <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;
}

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

这里最大的误解是单词的意思 before 和 after . 他们这样做 不 指的是元素本身,但指的是 内容 在元素中。所以 element:before 在内容之前,并且 element:after 是在内容之后,但两者仍在原始元素中。

这个 input 元素在css视图中没有内容,因此没有 :before 或 :after 伪内容。其他许多空的或替换的元素也是如此。

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

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

我发现你可以这样做:

.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应该是绝对的,这样您就可以设置后面的位置。

可以将父块中的after或before元素用于jquery。 这样地:

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