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

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


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

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


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

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


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

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

评论

如果您完全无法控制HTML，请尝试更改输入的边框颜色。我觉得这更引人注意。

#1 楼

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

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

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

但是，如果使用jquery，则可以在.after上使用

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


API文档

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

评论

Alex，我正在使用IE8和最新的FF，所以IE7没问题。我正在搜索有关：after限制的任何文档，但找不到它。 w3.org/TR/CSS2/generate.html指出，它被插入到文档树中的当前节点之后，因此在两种情况下均应起作用。

–matra
2010-4-7 14:08
除非您仅为自己创建页面，否则仍有很大一部分互联网仍会使用这些浏览器。 w3c规范说是的。但众所周知，浏览器会执行自己的规范说明。在输入上使用：after仅在Opera 9+中有效，但由于其内部构造DOM的方式而无法在IE，FF，safari或chrome中实现-再次，纯CSS不能实现。

– Alex
2010-4-7 15:14
我不确定4月是否会出现这种情况，但是Webkit总体上支持：after，尽管它不支持输入上的：before或：after。

– coreyward
2010-12-8 17:09
据我了解W3C：after和：before伪元素，它们只能放在容器元素上。为什么？因为它们附加在该特定元素内。输入不是容器。例如按钮，因此您可以将其戴上。可以正常工作。规范实际上说：元素的文档树内容之前和之后它明确表示内容。因此，元素必须是容器。

– Robert Koritnik
2011年1月11日17:07


下一个答案要好得多。给出实际原因，而不是谈论IE 7（谁在乎）和jQuery（不好的主意）

–花Ro
2014年6月5日18:07

#2 楼


:before和:after在容器内渲染

和不能包含其他元素。


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

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

W3C规范

如果我们仔细阅读该规范，它实际上表示它们已插入包含元素中：


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


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

评论

+1比接受的答案好得多。感谢您对标准本身的清晰解释。 {内容“ *”之前[required] :::太多了；红色; }：P

–凯文·佩诺（Kevin Peno）
2011年6月16日17:23


提示：如果仅使用之类的提交输入有问题，请改用

#3 楼

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

<input type="checkbox" />


工作正常，与

<input type="radio" />


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

评论

@ANeves，它对Chromium有用，但对Firefox不起作用。

– kcpr
19年4月7日在7:53

#4 楼

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

评论

它允许添加悬停动作，例如：input：hover + span：after {color：blue}。赞成。

–krassowski
17年7月14日在15:15
为什么这个答案投票很少？我认为理论知识很重要，但这可以解决问题。

– jorgefpastor
19年5月14日在1:28
解决问题的不错选择。

–小丑
19年5月30日在16:13

#5 楼

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


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


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

评论

这个答案是正确，简洁的，并提供了重要的上下文。应该在最上面，imo。

– Paul
5月13日11:36


#6 楼

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

#7 楼

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



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


评论

真好！请注意，占位符伪元素具有有限的属性支持：颜色，背景，单词间距，字母间距，文本修饰，垂直对齐，文本转换，行高，文本缩进，不透明度。参见css-tricks.com/almanac/selectors/p/placeholder

–亨利
2014年12月11日在22:05
感谢您的提示。只要记住，当用户填写输入框时，伪元素内的所有内容都会消失。如果您像我一样只想显示glyphicon搜索而不触摸标记，那就是UX问题。

–戴维·利马（Davi Lima）
16-2-24在13:29


关于此操作不再起作用的一些上下文：bugs.chromium.org/p/chromium/issues/detail?id=582301

–奥利弗·约瑟夫·阿什
17年11月23日在17:20

#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: "👍";
}  

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

评论

input＃myTextField〜span：before {更好，但是span应该真正具有一个更明确的类，例如.tick或.icon

–Val
18年8月9日在14:31
@Val该选择器将无法正常工作，因为〜选择了每个前面的元素，但是您只想要第一个。

– Christophh
8月18日15:18

#10 楼

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

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

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

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

评论

我可能不明白您的意思，但是如果这样做，伪元素在hr上起作用吗？ jsfiddle.net/demetriad/o49yn5hq

–克里斯
19年6月11日14:01
@Chris这让我感到惊讶，也让其他人感到惊讶。我认为这很奇怪。从CSS的角度来看，hr一直是模棱两可的，尽管您在讨论颜色时会发现更多。

–曼戈
19年7月10日在11:58


#11 楼

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


评论

+1-如果您使用的插件或框架会自动向元素本身（而不是父标签）添加验证类，则此解决方案效果很好。

–开拓者
2014年8月26日13:38

#12 楼

根据CSS 2.1规范中的注释，该规范“并未完全定义：before和：after与替换元素（例如HTML中的IMG）的交互。这将在以后的规范中更详细地定义。”尽管input不再是真正的替换元素，但基本情况没有改变：:before和:after对其的影响未明确说明，并且通常无效。

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

评论

这是一个评论，而不是一个答案-相当长的评论，但仍然是一个评论。

–开拓者
14年8月26日在13:39
@Blazemonger，尚不清楚问题是什么，但是无论如何，此答案与接受的答案解决的是相同的问题，但以更正确的方式解决。将生成的内容用于输入元素并不是没有可能，只是取决于浏览器而已。

– Jukka K. Korpela
14年8月26日在15:34

#13 楼

正如其他人解释的那样，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正在记录使用它的〜.07％的页面，这是我们的最大
删除阈值的20倍。

实际上指定伪输入上的元素至少需要指定
输入的内部结构，而我们还没有做到
（我不确定我们可以做到）。但是Boris
在其中一个bug线程中建议在外观上允许它：none
输入-基本上只是将它们转换为
s，而不是
“ kinda替换”元素。 br />

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




#15 楼

您必须在输入周围具有某种包装，才能使用伪元素之前或之后。这是一个小提琴，它在输入的包装div上具有一个before，然后将其放置在输入中-至少看起来像这样。显然，这是一种变通方法，但在紧要关头很有效，因此很容易响应。如果您需要放置其他内容，则可以轻松地将其设置为后。

工作小提琴

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


评论

不错的技巧，但是您可以将div风格化以“继续”输入。请参阅此小提琴jsfiddle.net/ose4r8uj/31，但您也可以使用bootstrap使其更容易：getbootstrap.com/css/#forms-control-validation查找“带有可选图标”部分。即使，这与原始问题无关。

– Victor Ivens
2015年3月30日17:24


仅供参考，对于输入的：focus，：hover等没有好处，因为您无法定位父元素

–jordanb
2015年10月29日在4:41

#16 楼

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

Koritnik的答案指出：：before和：after只能应用于容器元素，而输入元素不是容器。

但是，HTML 5引入了按钮元素，它是一个容器，其行为类似于输入[ 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>


评论

HTML 4实际上引入了

#17 楼

摘要

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


#18 楼

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

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





您需要有一个带填充和：after的div父级。
第一个父级必须是相对的，第二个div应该是绝对的，以便可以设置后面的位置。

本文标签： html css pseudo-element