在 Bootstrap 3 中的必填字段中添加星号

Answer 1

使用

.form-group.required

，不带空格。

.form-group.required .control-label:after {
  content:"*";
  color:red;
}

编辑：

对于复选框，您可以使用伪类：not()。您可以在每个标签后添加所需的 *，除非它是复选框

.form-group.required:not(.checkbox) .control-label:after, 
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
   content:"*";
   color:red;
}

注意：未经测试

您应该使用 .text 类或以其他方式定位它，尝试这个 html：

<div class="form-group required">
   <label class="col-md-2 control-label">&#160;</label>
   <div class="col-md-4">
      <div class="checkbox">
         <label class='text'> <!-- use this class -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

好的第三次编辑：

CSS 回到原来的样子

.form-group.required .control-label:after { 
   content:"*";
   color:red;
}

HTML：

<div class="form-group required">
   <label class="col-md-2">&#160;</label> <!-- remove class control-label -->
   <div class="col-md-4">
      <div class="checkbox">
         <label class='control-label'> <!-- use this class as the red * will be after control-label -->
            <input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
         </label>
      </div>
   </div>
</div>

Answer 2

假设这就是 HTML 的样子

<div class="form-group required">
   <label class="col-md-2 control-label">E-mail</label>
   <div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>

要在标签右侧显示星号：

.form-group.required .control-label:after { 
    color: #d00;
    content: "*";
    position: absolute;
    margin-left: 8px;
    top:7px;
}

或标签左侧：

.form-group.required .control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -15px;
}

要制作漂亮的大红色星号，您可以添加以下行：

font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;

或者如果您使用Font Awesome，请添加这些行（并更改内容行）：

font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";

Answer 3

.form-group .required .control-label:after

可能应该是

.form-group.required .control-label:after

。删除 .form-group 和 .required 之间的空格就是变化。

Answer 4

使用简单的CSS，

.myform .required:after {
  content: " *";
    color: red;
    font-weight: 100;
}

 <form class="myform">
    <div class="col-md-12">
      <label for="xxx_fname" class="form-label required">First Name</label>
      <input type="text" class="form-control" id="xxx_fname" >
   </div>
    <div class="col-md-12">
      <label for="xxx_lname" class="form-label required">Last Name</label>
      <input type="text" class="form-control" id="xxx_lname" >
   </div>
</form

Answer 5

另外两个答案是正确的。当您在 CSS 选择器中包含空格时，您将定位子元素，因此：

.form-group .required {
    styles
}

正在定位类为“required”的元素，该元素位于类为“form-group”的元素内。

如果没有空格，它的目标是具有 both 类的元素。 “必需”和“表单组”

Answer 6

这个 CSS 对我有用：

.form-group.required.control-label:before{
   color: red;
   content: "*";
   position: absolute;
   margin-left: -10px;
}

和这个 HTML：

<div class="form-group required control-label">
  <label for="emailField">Email</label>
  <input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>

Answer 7

这对我有用：

CSS

.form-group.required.control-label:before{
   content: "*";
   color: red;
}

或

.form-group.required.control-label:after{
   content: "*";
   color: red;
}

基本 HTML

<div class="form-group required control-label">
  <input class="form-control" />
</div>

Answer 8

我修改了CSS，因为我使用的是bootstrap 3.3.6

.form-group.required label:after{   
color: #d00;   
font-family: 'FontAwesome'; 
font-weight: normal;
font-size: 10px;
content: "\f069"; 
top:4px;   
position: absolute;   
 margin-left: 8px;
}

HTML

<div class="form-group required">
 <label for="return_notes"><?= _lang('notes') ?></label>
 <textarea class="form-control" name="return_notes" id="return_notes"  required="required"></textarea>
</div>

Answer 9

只需执行以下操作...

CSS

.form-group.required .control-label:after {
  content:"*";
  color:red;
}

HTML

<form>
  <div class="form-group required">
    <label class="control-label">Name</label>
    ...
  </div>
</form>

Answer 10

我们可以做这样的事情：

HTML

<form>
  <div class="required">
     <label class="control-label required">Name</label>
     <input type="text"></input>
  </div>
</form>

CSS

form label.required:after {
    content: "*";
    color: red;
}

通过这种方法，表单标签内具有所需类的任何标签都将在其内容后带有“*”。