it-swarm.com.de

Hinzufügen von Sternchen zu erforderlichen Feldern in Bootstrap 3

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

Hier ist das 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 mein CSS um Folgendes erweitert:

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

Trotzdem gibt das kein rotes * um die erforderlichen Felder. Was vermisse ich hier? Gibt es in Bootstrap 3 keine direkte Möglichkeit, * in erforderliche Felder einzuführen?


BEARBEITEN

Der in den allgemeinen Geschäftsbedingungen angegebene * wird nicht sofort in einem Kontrollkästchen angezeigt. Wie kann man das beheben?

enter image description here

157
brain storm

Verwenden Sie .form-group.required ohne Leerzeichen.

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

Bearbeiten:

Für die Checkbox 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 ansonsten wahrscheinlich als Ziel verwenden. 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 Änderung:

CSS zurück zu 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>
261
Timvp

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 ein schönes großes rotes Sternchen zu machen, können Sie diese 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";
68
th3uiguy

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

7
Jeremy Cook

Die beiden anderen Antworten sind richtig. Wenn Sie Leerzeichen in Ihre CSS-Selektoren einfügen, zielen Sie auf untergeordnete Elemente ab.

.form-group .required {
    styles
}

Ziel ist ein Element mit der Klasse "Erforderlich", das sich in einem Element mit der Klasse "Formulargruppe" befindet.

Ohne den Raum zielt es auf ein Element ab, das hat beide Klassen. 'Erforderlich' und 'Formulargruppe'

4
Corey

Dieses CSS hat bei mir funktioniert:

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

und dieses 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>
1
tomahawk