Hinzufügen eines Sterns zu den erforderlichen Feldern in Bootstrap 3

Mein HTML hat eine Klasse namens .required , die den erforderlichen Feldern zugewiesen ist.

Hier ist der HTML:

<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
    <input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
    <div class="form-group required">
       <label class="col-md-2 control-label">Username</label>
       <div class="col-md-4">
         <input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
       </div>
    </div>
    <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>
    <div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
    <div class="form-group required"><label class="col-md-2 control-label">&#160;</label><div class="col-md-4"><div class="checkbox"><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>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
           <button type="submit" class="btn btn-primary">
              <span class="glyphicon glyphicon-star"></span> Sign Me Up!
           </button>
        </div>
    </div>
</form>

Ich habe meinem CSS Folgendes hinzugefügt:

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

Trotzdem gibt es kein Rot *um die erforderlichen Felder. Was fehlt mir hier? Gibt es in Bootstrap 3 nicht eine direkte Möglichkeit, die *erforderlichen Felder einzuführen ?

BEARBEITEN

Die *Allgemeinen Geschäftsbedingungen werden nicht sofort in einem Kontrollkästchen angezeigt. Wie kann ich das beheben?

Verwenden Sie .form-group.requiredohne den Platz.

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

Bearbeiten:

Für das Kontrollkästchen können Sie die Pseudoklasse verwenden: not (). Sie fügen nach jedem Etikett das erforderliche * hinzu, es sei denn, es ist ein Kontrollkästchen

.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;
}

Hinweis: nicht getestet

Sie sollten die .text-Klasse verwenden oder sie anderweitig als Ziel festlegen. Versuchen Sie Folgendes:

<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>

Ok dritte Bearbeitung:

CSS zurück zu dem, was war

.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>

Angenommen, so sieht der HTML-Code aus

<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>

So zeigen Sie ein Sternchen rechts neben dem Etikett an:

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

Oder links vom Etikett:

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

Um schöne rote Sternchen zu machen, können Sie folgende Zeilen hinzufügen:

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

Oder wenn Sie Font Awesome verwenden, fügen Sie diese Zeilen hinzu (und ändern Sie die Inhaltszeile):

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

.form-group .required .control-label:aftersollte wohl sein .form-group.required .control-label:after. Das Entfernen des Leerzeichens zwischen .form-group und .required ist die Änderung.

Die beiden anderen Antworten sind richtig. Wenn Sie Leerzeichen in Ihre CSS-Selektoren aufnehmen, zielen Sie auf untergeordnete Elemente ab, und zwar wie folgt:

.form-group .required {
    styles
}

Zielt auf ein Element mit der Klasse "Erforderlich" ab, das sich in einem Element mit der Klasse "Formulargruppe" befindet.

Ohne das Leerzeichen zielt es auf ein Element ab, das beide Klassen hat. 'erforderlich' und 'Formulargruppe'

Dieses CSS hat bei mir funktioniert:

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

und dieser 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>