我可以使用input字段上的伪元素之前或之后：？
我试图使用:after input字段上的CSS伪元素:after ，但它不起作用。 如果我使用span ，它工作正常。
<style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style>
这样做（把“buu！”之后和“更多”之前的笑脸）
<span class="mystyle">buuu!</span>a some more
这是行不通的 – 它只会使某些颜色变红，但是没有笑脸。
<input class="mystyle" type="text" value="someValue">
我究竟做错了什么？ 我应该使用另一个伪select器？
注意：我无法在我的input添加一个span ，因为它是由第三方控件生成的。
:after :before和:after :before在Internet Explorer 7和之下不支持任何元素。
这也不意味着用于replace的元素，如表单元素 （input）和图像元素 。
换句话说，纯粹的CSS是不可能的 。
不过，如果使用jQuery，你可以使用
$(".mystyle").after("add your smiley here");
API文档
用javascript追加你的内容。 这将适用于所有浏览器。
:before和:after一个容器内渲染
和<input>不能包含其他元素。
伪元素只能在容器元素上定义（或者说只能被支持）。 因为它们呈现的方式在容器本身内是一个子元素。 input不能包含其他元素，因此它们不被支持。 另一方面，也是一个表单元素的button支持它们，因为它是其他子元素的容器。
如果你问我，如果一些浏览器在非容器元素上显示这两个伪元素，这是一个错误和一个非标准的一致性。 规范直接谈论元素内容…
W3C规范
如果我们仔细阅读规范，它实际上是说它们被插入到一个包含元素中：
作者使用：before和：after伪元素指定生成内容的样式和位置。 正如它们的名字所表示的那样：before和之后：伪元素指定元素的文档树内容之前和之后的内容的位置。 'content'属性与这些伪元素一起指定了什么被插入。
看到？ 元素的文档树内容 。 据我所知，这意味着在一个容器内。
奇怪的是，它与一些types的input。 至less在Chrome中，
<input type="checkbox" />
工作正常，一样
<input type="radio" />
这只是type=text和其他一些不起作用。
这里有另外一种方法 （假设你可以控制HTML）：在input后面添加一个空的<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>
:before和:after在容器中应用，这意味着您可以将它用于具有结束标记的元素。
它不适用于自闭元素。
在附注中，自闭的元素（例如img / hr / input）也被称为“replace元素”，因为它们被replace为其各自的内容。 “外部对象”缺less一个更好的术语。 更好的阅读这里
你不能在一个input元素中放置一个伪元素，但是可以放入阴影元素，就像占位符一样！
input[type="text"] { &::-webkit-input-placeholder { &:before { // your code } } }
要在其他浏览器中使用，请在不同的select器中使用:-moz-placeholder ， ::-moz-placeholder和:-ms-input-placeholder 。 无法对select器进行分组，因为如果浏览器无法识别select器将使整个语句无效。
更新 ：上面的代码仅适用于CSS预处理器（SASS，LESS …），无需预处理器使用：
input[type="text"]::-webkit-input-placeholder:before { // your code }
我用background-image为必填字段创build红点。
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上查看
我发现这个职位，因为我有同样的问题，这是为我工作的解决scheme。 与replaceinput值相反，只需将其删除，并将绝对位置放置在相同大小的后面即可，跨度可以使用:before伪类应用到您select的图标字体。
<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>
根据CSS 2.1规范的说明，规范“并没有完全定义before：和after之间的replace元素（如HTML中的IMG）之间的交互。 这将在未来的规范中有更详细的定义。“虽然input不再是真正的替代元素，但基本情况并没有改变:before的影响:before在未明确的情况下，通常没有影响。
解决办法是find一个不同的方法来解决你想要解决的问题。 将生成的内容放入文本input控件中会非常具有误导性：对于用户来说，它似乎是控件中初始值的一部分，但不能修改 – 所以它似乎是在开始时被强制的东西控制，但它不会作为表单数据的一部分提交。
正如其他人所解释的那样， input是被replace的void元素，所以大多数浏览器不允许你在它们::before生成::before和::after伪元素。
但是，CSS工作组正在考虑明确允许::before和::after以防input appearance: none 。
从https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ，
Safari和Chrome都允许在表单input中使用伪元素。 其他浏览器不。 我们考虑删除这个，但是使用计数器logging了使用它的约0.07％的页面，这是我们的最大删除阈值的20倍。
实际上，在input中指定伪元素将需要至less在某种程度上指定input的内部结构，这是我们尚未设法完成的（而且我不相信我们能够做到）。 但鲍里斯暗示，在一个bugthreads，允许它在外观上：没有投入 – 基本上只是把它们转换成<div> s，而不是“被replace”的元素。
您必须在input中使用伪元素之前或之后的某种包装。 这里有一个小提琴在input的包装div上有一个before，然后把before放在input中 – 至less看起来像这样。 很明显，这是一个工作，但有效的捏，并有助于作出回应。 如果你需要添加其他的内容，你可以很容易的做到这一点。
工作小提琴
美元符号内的input作为伪元素： 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; }
如果你正在尝试使用：before和：after来设置input元素的风格，那么你试图模仿其他跨度，div甚至是CSS堆栈中元素的效果。
正如Robert Koritnik的回答指出的那样：before和after之后只能应用于容器元素而input元素不是容器。
然而，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>
接下来尝试：
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>
概要
它不适用于<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仅适用于可以具有子节点的节点，因为它们将新节点作为第一个或最后一个节点插入。
我发现你可以这样做：
.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>
纯CSS中的工作解决scheme：
诀窍是假设在文本字段之后有一个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>
你可以在你父块的元素之后或之前使用jQuery。 喜欢这个：
$(yourInput).parent().addClass("error-form-field");
