В моем HTML есть класс, .required
который называется обязательными полями.
Вот 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>
Я добавил следующее в мой CSS;
.form-group .required .control-label:after {
content:"*";color:red;
}
Тем не менее, это не дает красный цвет *
вокруг обязательных полей. Что мне здесь не хватает? Разве в Bootstrap 3 нет прямого способа ввести *
необходимые поля?
РЕДАКТИРОВАТЬ
*
В условиях не появляется сразу флажок. Как это исправить?
css
forms
twitter-bootstrap-3
form-fields
мозговой штурм
источник
источник
Ответы:
Использовать
.form-group.required
без места.Редактировать:Для флажка вы можете использовать псевдокласс: not (). Вы добавляете обязательные * после каждого ярлыка, если это не флажок
Примечание: не тестировалось
Вы должны использовать класс .text или нацеливаться на него иначе, возможно, попробуйте этот HTML:
Хорошо, третье редактирование:
CSS вернуться к тому, что было
HTML:
источник
bootstrap-theme.css
).::after
. Уровень 3 CSS спекуляции нет.Предполагая, что это то, как выглядит HTML
Чтобы отобразить звездочку справа от ярлыка:
Или слева от ярлыка:
Чтобы сделать красивые большие красные звездочки, вы можете добавить эти строки:
Или, если вы используете Font Awesome, добавьте эти строки (и измените строку содержимого):
источник
top:7px;
вызовет проблемы, если метка многострочная. Было бы лучше заменить его,margin-top: -4px;
например..form-group .required .control-label:after
наверное должно быть.form-group.required .control-label:after
. Удаление пробела между .form-group и .required - это изменение.источник
.control-group.required .control-label:after { content:"*"; color:red; }
Два других ответа верны. Когда вы включаете пробелы в ваши CSS-селекторы, вы нацеливаетесь на дочерние элементы так:
Нацеливается на элемент с классом «required», который находится внутри элемента с классом «form-group».
Без пробела он нацелен на элемент, который имеет оба класса. 'required' и 'form-group'
источник
Этот CSS работал для меня:
и этот HTML:
источник