在 Bootstrap 3中将星号添加到所需字段

小开

.form-group .required .control-label:after可能应该是 .form-group.required .control-label:after。删除. form-group 和. need 之间的空格就是更改。

小开

最佳答案

使用不带空格的 .form-group.required。

.form-group.required .control-label:after {
content:"*";
color:red;
}

~~编辑:~~

对于复选框，您可以使用伪类: 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'>  <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">&#160;</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>

小开

另外两个答案是正确的。当你在 CSS 选择器中包含空格时，你的目标是子元素，所以:

.form-group .required {
styles
}

是以“必需”类的元素为目标，该类位于具有“ form-group”类的元素内部。

如果没有这个空间，它的目标就是一个包含都有类的元素

小开

假设这就是 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>

在标签右侧显示星号:

.form-group.required .control-label:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
}

或者在标签的左边:

.form-group.required .control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -15px;
}

为了画一个漂亮的大红星号，你可以添加以下几行:

font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;

或者，如果您使用超赞字体，请添加以下行(并更改内容行) :

font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";

小开

这个 CSS 对我很有用:

.form-group.required.control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -10px;
}

以及本 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>

小开

这对我有用:

CSS

.form-group.required.control-label:before{
content: "*";
color: red;
}

或者

.form-group.required.control-label:after{
content: "*";
color: red;
}

基本 HTML

<div class="form-group required control-label">
<input class="form-control" />
</div>

小开

我修改了 css，因为我正在使用 bootstrap 3.3.6

.form-group.required label:after{
color: #d00;
font-family: 'FontAwesome';
font-weight: normal;
font-size: 10px;
content: "\f069";
top:4px;
position: absolute;
margin-left: 8px;
}

(HTML)

<div class="form-group required">
<label for="return_notes"><?= _lang('notes') ?></label>
<textarea class="form-control" name="return_notes" id="return_notes"  required="required"></textarea>
</div>

小开

使用简单的 css,

.myform .required:after {
content: " *";
color: red;
font-weight: 100;
}

 <form class="myform">
<div class="col-md-12">
<label for="xxx_fname" class="form-label required">First Name</label>
<input type="text" class="form-control" id="xxx_fname" >
</div>
<div class="col-md-12">
<label for="xxx_lname" class="form-label required">Last Name</label>
<input type="text" class="form-control" id="xxx_lname" >
</div>
</form

在 Bootstrap 3中将星号添加到所需字段

剪辑