我可以使用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");