Thêm dấu hoa thị vào các trường bắt buộc trong Bootstrap 3

HTML của tôi có một lớp được gọi .requiredlà được gán cho các trường bắt buộc.

Đây là 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">&#160;</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>

Tôi đã thêm phần sau vào CSS của mình;

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

Tuy nhiên, điều đó không tạo ra màu đỏ *xung quanh các trường bắt buộc. Tôi đang thiếu gì ở đây? Không có cách trực tiếp nào trong Bootstrap 3 để giới thiệu *các trường bắt buộc phải không?

BIÊN TẬP

Các *điều khoản và điều kiện không xuất hiện ngay lập tức vào hộp kiểm. Làm thế nào để khắc phục điều này?

Sử dụng .form-group.requiredmà không có không gian.

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

Biên tập:

Đối với hộp kiểm, bạn có thể sử dụng lớp giả: not (). Bạn thêm yêu cầu * sau mỗi nhãn trừ khi đó là hộp kiểm

.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;
}

Lưu ý: không được kiểm tra

Bạn nên sử dụng lớp .text hoặc nhắm mục tiêu nếu không, có thể thử html này:

<div class="form-group required">
   <label class="col-md-2 control-label">&#160;</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>

Chỉnh sửa thứ ba:

CSS trở lại những gì đã được

.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>

Giả sử đây là giao diện của 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>

Để hiển thị dấu hoa thị bên phải nhãn:

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

Hoặc ở bên trái của nhãn:

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

Để tạo một dấu sao lớn màu đỏ đẹp, bạn có thể thêm các dòng sau:

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

Hoặc nếu bạn đang sử dụng Font Awesome, hãy thêm các dòng này (và thay đổi dòng nội dung):

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

.form-group .required .control-label:aftercó lẽ nên được .form-group.required .control-label:after. Việc loại bỏ khoảng trắng giữa .form-group và .required là sự thay đổi.

Hai câu trả lời còn lại là đúng. Khi bạn bao gồm khoảng trắng trong bộ chọn CSS, bạn sẽ nhắm mục tiêu các phần tử con, vì vậy:

.form-group .required {
    styles
}

Đang nhắm mục tiêu một phần tử với lớp "bắt buộc" nằm trong một phần tử có lớp "nhóm biểu mẫu".

Không có không gian, nó nhắm mục tiêu một phần tử có cả hai lớp. 'bắt buộc' và 'nhóm hình thức'

CSS này làm việc cho tôi:

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

và HTML này:

<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>