使用CSS自动添加“必填字段”星号来形成input
什么是克服这个代码不能按预期工作的不幸事实的好方法：
<div class="required"> <label>Name:</label> <input type="text"> </div> <style> .required input:after { content:"*"; } </style> 在一个完美的世界里，所有需要的input都会得到一个星号，表示该字段是必需的。 这个解决scheme不可能，因为在元素内容之后插入CSS，而不是在元素本身之后插入，但是像这样的东西将是理想的。 在具有数千个必填字段的网站上，我可以将input前面的星号移到一行（ :after :before ），或者我可以将它移到标签的末尾（ .required label:after ）或在标签的前面，或在包装盒上的位置等等。
这一点非常重要，不仅仅是因为我改变了我的想法，无论哪里都放置星号，而且对于格式布局不允许星号在标准位置的奇怪情况。 它也可以用于检查表单或突出显示不正确完成的控件的validation。
最后，它不会添加额外的标记。
有没有什么好的解决scheme具有不可能代码的全部或大部分优点？
类似的结果可以通过使用星号图片的背景图像并设置标签/input/外部div的背景以及星号图像的大小的填充来实现。 像这样的东西：
.required input { padding-right: 25px; background-image: url(...); background-position: right top; }
这会把星号INSIDE放在文本框中，但是在div.required而不是div.required的.required input上放置相同的div.required ，可能会更符合你的要求，如果不那么优雅的话。
这种方法不需要额外的input。
我不断得到这个post奇怪的upvote。 这个答案对于OP是正确的，但在大多数情况下可能不是最好的select。 :after styntax好多了 。
这是你的想法？
<div class="required"> <label>Name:</label> <input type="text"> </div> <style> .required:after { content:" *"; } </style>
.required label { font-weight: bold; } .required label:after { color: #e32; content: ' *'; display:inline; }
捣鼓你的确切结构： http : //jsfiddle.net/bQ859/
把它正好放在INTOinput上，如下图所示：
我发现了以下方法：
.asterisk_input:after { content:" *"; color: #e32; position: absolute; margin: 0px 0px 0px -20px; font-size: xx-large; padding: 0 5px 0 0; } <form> <div> <input type="text" size="15" /> <span class="asterisk_input"> </span> </div> </form>
我工作的网站使用固定布局进行编码，所以对我来说没问题。
我不确定这是否适合液体devise。
input[required], select[required] { background-image: url('/img/star.png'); background-repeat: no-repeat; background-position-x: right; }
图像右侧有一些20像素的空间，不会与select下拉箭头重叠
它看起来像这样： 
input[required]{ background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%); background-size: 1em 1em; background-position: right top; background-repeat: no-repeat; }
使用jQuery和CSS
jQuery(document).ready(function() { jQuery("[required]").after("<span class='required'>*</span>"); });
.required { position: absolute; margin-left: -10px; color: #FB0000; font-size: 15px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" value="xxx" required>
用CSS写
.form-group.required .control-label:after {content:"*";color:red;}
和HTML
<div class="form-group required"> <label>Name:</label> <input type="text"> </div>
我觉得这是有效的办法，为什么这么头疼
<div class="full-row"> <label for="email-id">Email Address<span style="color:red">*</span></label> <input type="email" id="email-id" name="email-id" ng-model="user.email" > </div>
你也可以使用绝对定位…
.required { display: inline-block; position: relative; } .required label:after { content:"*"; display: block; position: absolute; right: -.6em; top: 0; }
在小提琴中，我提供了一个选项，在input之后或标签之后放置“*”。
在向用户传达相关信息时，您不应该使用CSS或背景图片，因为这些信息对于辅助技术用户是不可用的，因此，通过使您的表格对他们无法使用，您实际上排除了个人。
您可以通过将HTML代码封装在包含“必需”类，然后是“form-group”类的div标签中来实现所需的结果*。但是，只有具有Bootstrap才有效。
<div class="form-group required"> <div class="required"> <label>Name:</label> <input type="text"> </div> <div>
对于那些最终在这里，但有jQuery：
// javascript / jQuery $("label.required").append('<span class="red-star"> *</span>') // css .red-star { color: red; }
.asterisc { display: block; color: red; margin: -19px 185px; }
<input style="width:200px"> <span class="asterisc">*</span>
