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"> </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?
css
forms
twitter-bootstrap-3
form-fields
Brainstorming
quelle
quelle
Antworten:
Verwenden Sie
.form-group.required
ohne den Platz.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
Hinweis: nicht getestet
Sie sollten die .text-Klasse verwenden oder sie anderweitig als Ziel festlegen. Versuchen Sie Folgendes:
Ok dritte Bearbeitung:
CSS zurück zu dem, was war
HTML:
quelle
bootstrap-theme.css
. B. zu Ihrer BS-Themendatei ).::after
. CSS- Spekulation der Stufe 3 ist aus.Angenommen, so sieht der HTML-Code aus
So zeigen Sie ein Sternchen rechts neben dem Etikett an:
Oder links vom Etikett:
Um schöne rote Sternchen zu machen, können Sie folgende Zeilen hinzufügen:
Oder wenn Sie Font Awesome verwenden, fügen Sie diese Zeilen hinzu (und ändern Sie die Inhaltszeile):
quelle
top:7px;
verursacht die Probleme, wenn das Etikett mehrzeilig ist. Es wäre besser, esmargin-top: -4px;
zum Beispiel durch zu ersetzen ..form-group .required .control-label:after
sollte wohl sein.form-group.required .control-label:after
. Das Entfernen des Leerzeichens zwischen .form-group und .required ist die Änderung.quelle
.control-group.required .control-label:after { content:"*"; color:red; }
Die beiden anderen Antworten sind richtig. Wenn Sie Leerzeichen in Ihre CSS-Selektoren aufnehmen, zielen Sie auf untergeordnete Elemente ab, und zwar wie folgt:
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'
quelle
Dieses CSS hat bei mir funktioniert:
und dieser HTML:
quelle