Mój HTML ma klasę o nazwie, .required
która jest przypisana do wymaganych pól.
Oto kod 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>
Dodałem do mojego CSS;
.form-group .required .control-label:after {
content:"*";color:red;
}
Jednak to nie daje czerwonego koloru *
wokół wymaganych pól. Czego tu brakuje? Czy w Bootstrap 3 nie ma bezpośredniego sposobu na wprowadzenie *
wymaganych pól?
EDYTOWAĆ
*
W warunkach nie pojawia się natychmiast do wyboru. Jak to naprawić?
css
forms
twitter-bootstrap-3
form-fields
burza mózgów
źródło
źródło
Odpowiedzi:
Używaj
.form-group.required
bez spacji.Edytować:W polu wyboru możesz użyć pseudoklasy: not (). Wymagane * dodajesz po każdej etykiecie, chyba że jest to pole wyboru
Uwaga: nie testowano
Powinieneś użyć klasy .text lub skierować ją na nią, prawdopodobnie w innym przypadku, wypróbuj ten kod HTML:
Ok trzecia edycja:
CSS z powrotem do tego, co było
HTML:
źródło
bootstrap-theme.css
. Do pliku motywu BS ).::after
. Spekulacje na temat CSS poziomu 3 wyszły na jaw.Zakładając, że tak wygląda HTML
Aby wyświetlić gwiazdkę po prawej stronie etykiety:
Lub po lewej stronie etykiety:
Aby utworzyć ładne, duże czerwone gwiazdki, możesz dodać te linie:
Lub, jeśli używasz Font Awesome, dodaj te wiersze (i zmień zawartość):
źródło
top:7px;
spowoduje problemy, jeśli etykieta jest wielowierszowa. Lepiej byłoby go zastąpićmargin-top: -4px;
np..form-group .required .control-label:after
prawdopodobnie powinno być.form-group.required .control-label:after
. Usunięcie spacji między .form-group i .required to zmiana.źródło
.control-group.required .control-label:after { content:"*"; color:red; }
Pozostałe dwie odpowiedzi są prawidłowe. Kiedy dodajesz spacje do selektorów CSS, celujesz w elementy podrzędne, więc:
Celuje w element z klasą „required”, który znajduje się wewnątrz elementu z klasą „form-group”.
Bez spacji celuje w element, który ma obie klasy. „wymagane” i „grupa formularzy”
źródło
Ten CSS zadziałał dla mnie:
i ten HTML:
źródło