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

Question

मेरे 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>

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

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

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

---

संपादित करें

*नियम और शर्तों में एक चेकबॉक्स को तुरंत प्रकट नहीं होता है। इसे कैसे ठीक करें?

Comments

कृपया प्रश्न का उत्तर दें।

— लवअंडप्पन 20

Answer 1

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

ठीक तीसरा संपादित करें:

सीएसएस वापस जो था

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

Comments

मैंने एक संपादित की कोशिश की, लेकिन यह काम नहीं किया। क्या तुम इसे जांचोगे?

— ब्रेन स्टॉर्म

किसी दिन सीएसएस में भी बदलाव करें

— टाइमवैप

लगता है सामान्य BS3 नहीं है, लेकिन कस्टम सीएसएस? यह मेरे लिए भी उत्तरदायी लगता है, इसलिए शायद इसे जोड़ना ठीक है (अपनी बीएस थीम फ़ाइल, जैसे bootstrap-theme.css)।

— रोलैंड

छद्म वर्ग और छद्म तत्वों को अलग करने के लिए आप उपयोग कर सकते हैं ::after। स्तर 3 सीएसएस अटकलें बाहर हैं।

— नियोंगबाओ

Answer 2

यह मानते हुए कि 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";

Comments

top:7px;लेबल मल्टी-लाइन है, तो समस्याओं का कारण होगा। margin-top: -4px;उदाहरण के लिए इसे प्रतिस्थापित करना बेहतर होगा ।

— साशा_गुद

Answer 3

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

Comments

धन्यवाद! बूटस्ट्रैप 2.3 के साथ काम भी करता है .control-group.required .control-label:after { content:"*"; color:red; }

— एडीटर

Answer 4

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

.form-group .required {
    styles
}

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

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

Comments

यह आपके मूल प्रश्न से अलग मुद्दा है। लेकिन आपका सीएसएस बिल्कुल वही कर रहा है जो आप उसे बता रहे हैं। यह लेबल फ़ील्ड के साथ तारांकन चिह्न लगा रहा है (जो आपके नियमों और शर्तों के लिए रिक्त है) और इनपुट फ़ील्ड नहीं। यदि आप उन्हें एक साथ दिखाना चाहते हैं तो आपको उन्हें HTML में एक साथ समूहित करना होगा। लेकिन फिर आपके पास एक खाली लेबल फ़ील्ड है जो खराब है। मैं सिर्फ नियम और शर्तों पर लेबल को खोदूंगा, लेकिन मान्यताओं को बनाए रखूंगा।

— कोरी

Answer 5

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

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

Comments

यह div पर नियंत्रण-लेबल होना थोड़ा अजीब है जिसमें लेबल और इनपुट दोनों शामिल हैं।

— देवलिन ने