CSS 在 Bootstrap 3 中为必填字段添加星号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23141854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding asterisk to required fields in Bootstrap 3
提问by brain storm
My HTML has a class called .requiredthat is assigned to required fields.
我的 HTML 有一个称为.required分配给必填字段的类。
Here is the HTML:
这是 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>
I added the following to my CSS;
我将以下内容添加到我的 CSS 中；
.form-group .required .control-label:after {
content:"*";color:red;
}
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?
仍然没有*在必填字段周围显示红色。我在这里缺少什么？Bootstrap 3 中没有直接的方法来引入*必填字段吗？
EDIT
编辑
The *in terms and conditions does not appear immediately to a checkbox. How to fix this?
将*在条款和条件不会立即出现一个复选框。如何解决这个问题？
回答by Timvp
Use .form-group.requiredwithout the space.
.form-group.required无空间使用。
.form-group.required .control-label:after {
content:"*";
color:red;
}
Edit:
编辑：
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;
}
Note: not tested
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>
对于复选框，您可以使用伪类 :not()。您在每个标签后添加必需的 * 除非它是一个复选框
.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：
<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>
Ok third edit:
好的第三次编辑：
CSS back to what is was
CSS 回到原来的样子
.form-group.required .control-label:after {
content:"*";
color:red;
}
HTML:
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>
回答by th3uiguy
Assuming this is what the HTML looks like
假设这是 HTML 的样子
<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>
To display an asterisk on the right of the label:
要在标签右侧显示星号：
.form-group.required .control-label:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
}
Or to the left of the label:
或在标签左侧：
.form-group.required .control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -15px;
}
To make a nice big red asterisks you can add these lines:
要制作一个漂亮的大红色星号，您可以添加以下几行：
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;
Or if you are using Font Awesomeadd these lines (and change the content line):
或者，如果您使用的是Font Awesome，请添加这些行（并更改内容行）：
font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";
回答by Jeremy Cook
.form-group .required .control-label:aftershould probably be .form-group.required .control-label:after. The removal of the space between .form-group and .required is the change.
.form-group .required .control-label:after应该是.form-group.required .control-label:after。删除 .form-group 和 .required 之间的空间就是变化。
回答by Corey
The other two answers are correct. When you include spaces in your CSS selectors you're targeting child elements so:
其他两个答案是正确的。当您在 CSS 选择器中包含空格时，您的目标是子元素，因此：
.form-group .required {
styles
}
Is targeting an element with the class of "required" that is inside an element with the class of "form-group".
目标是具有“必需”类的元素，该元素位于具有“表单组”类的元素内。
Without the space it's targeting an element that has bothclasses. 'required' and 'form-group'
没有空间，它的目标是具有两个类的元素。“必需”和“表单组”
回答by tomahawk
This CSS worked for me:
这个 CSS 对我有用：
.form-group.required.control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -10px;
}
and this HTML:
和这个 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>
