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

166

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?

Geben Sie hier die Bildbeschreibung ein

Brainstorming
quelle
2
Bitte markieren Sie die beantwortete Frage.
LoveAndHappiness

Antworten:

283

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>
Timvp
quelle
3
Ich habe das bearbeitete ausprobiert, aber es hat nicht funktioniert. Können Sie es bitte überprüfen?
Brain Storm
Ändern Sie etwas, auch in der CSS
Timvp
1
Scheint nicht generisches BS3 zu sein, sondern benutzerdefiniertes CSS? Es sieht auch für mich reaktionsschnell aus, also ist es vielleicht in Ordnung, dies hinzuzufügen (z bootstrap-theme.css. B. zu Ihrer BS-Themendatei ).
Roland
Zur Unterscheidung von Pseudoklassen- und Pseudoelementen können Sie verwenden ::after. CSS- Spekulation der Stufe 3 ist aus.
Niyongabo
73

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";
th3uiguy
quelle
1
top:7px;verursacht die Probleme, wenn das Etikett mehrzeilig ist. Es wäre besser, es margin-top: -4px;zum Beispiel durch zu ersetzen .
Sasha_gud
7

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

Jeremy Cook
quelle
Vielen Dank! funktioniert auch für Bootstrap 2.3 mit .control-group.required .control-label:after { content:"*"; color:red; }
Edditor
4

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'

Corey
quelle
Dies ist ein anderes Problem als Ihre ursprüngliche Frage. Aber Ihr CSS macht genau das, was Sie ihm sagen. Es setzt das Sternchen mit dem Beschriftungsfeld (das für Ihre Allgemeinen Geschäftsbedingungen leer ist) und nicht mit dem Eingabefeld. Wenn Sie möchten, dass sie zusammen angezeigt werden, müssen Sie sie im HTML-Code zusammenfassen. Aber dann haben Sie ein leeres Beschriftungsfeld, das schlecht ist. Ich würde nur das Etikett auf die Allgemeinen Geschäftsbedingungen verzichten, aber die Validierungen behalten.
Corey
1

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>
Tomahawk
quelle
Es ist etwas seltsam, das Control-Label auf dem Div zu haben, das sowohl das Label als auch die Eingabe enthält.
Devlin Carnate