我试图:after在input字段上使用CSS伪元素,但它不起作用.如果我使用它span,它可以正常工作.
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
Run Code Online (Sandbox Code Playgroud)
这是有效的(在"buu!"之后和"更多"之前放置笑脸)
<span class="mystyle">buuu!</span>a some more
Run Code Online (Sandbox Code Playgroud)
这不起作用 - 它只用红色调色someValue,但没有笑脸.
<input class="mystyle" type="text" value="someValue">
Run Code Online (Sandbox Code Playgroud)
我究竟做错了什么?我应该使用另一个伪选择器吗?
注意:我不能添加span我的input,因为它是由第三方控件生成的.
如何将glyphicon添加到文本类型输入框?例如,我想在用户名输入中使用'icon-user',如下所示:

有什么好方法可以克服这段代码不能按预期工作的不幸事实:
<div class="required">
<label>Name:</label>
<input type="text">
</div>
<style>
.required input:after { content:"*"; }
</style>
Run Code Online (Sandbox Code Playgroud)
在一个完美的世界中,所有必需的inputs都会得到一个小星号,表明该字段是必需的.这个解决方案是不可能的,因为CSS是在元素内容之后插入的,而不是在元素本身之后插入,但类似的东西是理想的.在一个包含数千个必填字段的网站上,我可以在输入前移动星号,只需更改一行(:after到:before)或我可以将其移动到标签的末尾(.required label:after)或标签的前面,或者包装盒等位置......
这一点非常重要,不仅仅是因为我改变了我的想法,无论在哪里放置星号,还要考虑表格布局不允许星号位于标准位置的奇怪情况.它也适用于检查表单或突出显示不正确完成的控件的验证.
最后,它不会添加额外的标记.
是否有任何好的解决方案具有不可能代码的全部或大部分优势?
我有一个大型表格的指令,其中一些字段是必需的,而另一些则不是.必填字段标有required属性.
我想预先挂起所有输入,<span class='something'>*</span>
基本上是这样的:$("input[required]").prepend(<span class='something'>*</span>)
我对angularjs的理解仍然有限,这让我得到了指令的编译功能,但是当我到达那里时我迷失了.
免责声明:我的直觉是告诉我,做那样的事情并不是真正"有棱有角"的方式 - 没关系,不管我最终是否使用这种技术,我都想知道如何做到这一点.那说我也欢迎更多"有棱角"的建议.
谢谢!