在Bootstrap 3的必填字段中添加星号 [英] Adding asterisk to required fields in Bootstrap 3
问题描述
我的HTML有一个名为.required
的类,已分配给必填字段.
My HTML has a class called .required
that is assigned to required fields.
这是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中添加了以下内容;
I added the following to my CSS;
.form-group .required .control-label:after {
content:"*";color:red;
}
在必填字段周围仍不显示红色*
的情况.我在这里想念什么? Bootstrap 3中没有直接方法将*
引入必填字段吗?
Still that does not give a red *
around the required fields. What am I missing here? Isn't there a direct way in Bootstrap 3 to introduce *
to required fields?
条款中的*
不会立即出现在复选框中.该如何解决?
The *
in terms and conditions does not appear immediately to a checkbox. How to fix this?
推荐答案
在没有空格的情况下使用.form-group.required
.
Use .form-group.required
without the space.
.form-group.required .control-label:after {
content:"*";
color:red;
}
修改:
对于复选框,您可以使用伪类:not().您可以在每个标签后添加必填*,除非它是一个复选框
For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox
.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;
}
注意:未经测试
您应该使用.text类或将其定位,否则,请尝试以下html:
You should use the .text class or target it otherwise probably, try this html:
<div class="form-group required">
<label class="col-md-2 control-label"> </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>
确定第三次
CSS回到原来的状态
.form-group.required .control-label:after {
content:"*";
color:red;
}
HTML:
<div class="form-group required">
<label class="col-md-2"> </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>
这篇关于在Bootstrap 3的必填字段中添加星号的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!