css - बूटस्ट्रैप 3 में आवश्यक फ़ील्ड में तारांकन जोड़ना?




forms twitter-bootstrap-3 (4)

अंतरिक्ष के बिना .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 क्लास का उपयोग करना चाहिए या अन्यथा इसे लक्षित करना चाहिए, इस एचटीएमएल को आजमाएं:

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

ठीक तीसरा संपादन:

सीएसएस वापस क्या था

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

मेरे एचटीएमएल में कक्षा कहा जाता है जिसे आवश्यक फ़ील्ड को सौंपा गया है। यहां एचटीएमएल है:

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

मैंने अपने सीएसएस में निम्नलिखित जोड़ा;

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

फिर भी वह आवश्यक फ़ील्ड के चारों ओर एक लाल * नहीं देता है। मुझे यहां क्या समझ नहीं आ रहा है? आवश्यक फ़ील्ड को * पेश करने के लिए बूटस्ट्रैप 3 में कोई सीधा तरीका नहीं है।

संपादित करें: * नियमों और शर्तों में यह ठीक करने के लिए checkbox.how के लिए तत्काल प्रकट नहीं होता है?


अन्य दो उत्तरों सही हैं। जब आप अपने सीएसएस चयनकर्ताओं में रिक्त स्थान शामिल करते हैं तो आप बच्चे तत्वों को लक्षित कर रहे हैं:

.form-group .required {
    styles
}

"फॉर्म-ग्रुप" के वर्ग के साथ तत्व के अंदर "आवश्यक" वर्ग के साथ एक तत्व को लक्षित कर रहा है।

अंतरिक्ष के बिना यह एक तत्व को लक्षित कर रहा है जिसमें दोनों वर्ग हैं। 'आवश्यक' और 'फॉर्म-ग्रुप'


यह सीएसएस मेरे लिए काम किया:

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

और यह एचटीएमएल:

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

.form-group .required .control-label:after शायद होना चाहिए .form-group.required .control-label:after । .form-group और .ququired के बीच की जगह को हटाने का परिवर्तन है।





form-fields