การเพิ่มเครื่องหมายดอกจันในฟิลด์บังคับใน Bootstrap 3

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">&#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>

ฉันเพิ่มสิ่งต่อไปนี้ใน CSS ของฉัน;

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

ยังคงที่ไม่ให้สีแดง*รอบ ๆ ฟิลด์ที่ต้องการ ฉันหายไปนี่อะไร Bootstrap 3 มีวิธีการโดยตรงในการแนะนำ*ไปยังเขตข้อมูลที่ต้องการหรือไม่?

แก้ไข

*ในข้อกำหนดและเงื่อนไขที่ไม่ปรากฏทันทีที่ช่องทำเครื่องหมาย จะแก้ไขได้อย่างไร?

ใช้.form-group.requiredโดยไม่มีที่ว่าง

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

แก้ไข:

สำหรับช่องทำเครื่องหมายคุณสามารถใช้คลาสหลอก: ไม่ () คุณเพิ่ม * ที่จำเป็นหลังจากแต่ละป้ายกำกับเว้นแต่จะเป็นช่องทำเครื่องหมาย

.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">&#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>

ตกลงแก้ไขที่สาม:

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>

สมมติว่านี่เป็นสิ่งที่ 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 Awesome ให้เพิ่มบรรทัดเหล่านี้ (และเปลี่ยนบรรทัดเนื้อหา):

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

.form-group .required .control-label:after.form-group.required .control-label:afterอาจจะ การลบช่องว่างระหว่าง. form-group และ .required คือการเปลี่ยนแปลง

อีกสองคำตอบนั้นถูกต้อง เมื่อคุณรวมช่องว่างในตัวเลือก CSS ของคุณคุณจะกำหนดเป้าหมายไปที่องค์ประกอบย่อยดังนี้

.form-group .required {
    styles
}

กำลังกำหนดเป้าหมายองค์ประกอบที่มีคลาส "จำเป็น" ที่อยู่ภายในองค์ประกอบที่มีคลาสของ "form-group"

หากไม่มีช่องว่างก็กำหนดเป้าหมายองค์ประกอบที่มีทั้งชั้นเรียน 'จำเป็น' และ 'แบบฟอร์มกลุ่ม'

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>