CSS चयनकर्ता इनपुट

Question

करने के लिए बाध्य वहाँ label रों (for विशेषता के माध्यम से) input क्षेत्रों के लिए बाध्य कर चयन करने के लिए required विशेषता निर्धारित होने सीएसएस में कोई तरीका है? कुछ की तरह:

label:input[required] { 
    ... 
} 

वर्तमान में, मैं class="required" लेबल और आदानों की स्टाइल के लिए जोड़ रहा। अब मेरे पास आवश्यक इनपुट फ़ील्ड में HTML5 विशेषता required="required" है। अनावश्यक वर्ग विशेषताओं को हटाना अच्छा लगेगा।

closest answer मैंने पाया label तत्व के for विशेषता का उपयोग नहीं है, लेकिन आवश्यकता होगी कि label सीधे HTML में इनपुट के निकट हो।

Answer 1

कैसे CSS 2 Attribute Selectors यह ब्राउज़र के बीच बहुत संगत है।

उदाहरण:

<style> 
label[required=required] 
{ 
color: blue; 
} 
</style> 
<label required="required" for="one">Label:</label><input name="one" id="one" /> 

इसके अलावा this की जाँच करें।

Answer 2

यह समाधान अधिकांश आधुनिक ब्राउज़र में काम करता है:

<style> 

label > input[required="required"] { 
    background: red; 
} 

</style> 
<label for="myField"><input required="required" id="myField" /></label> 

Answer 3

मुझे नहीं लगता कि यह वास्तव में रास्ता है कि ओ पी चाहता है में सीएसएस के माध्यम से पूरा किया जा सकता। सीएसएस बस उस तरह से काम नहीं करता है।

मेरी राय में एक बेहतर दृष्टिकोण पीछे हटना और बड़ी तस्वीर को देखना है। आपके पास एक ऐसा फॉर्म है जहां कुछ फ़ील्ड आवश्यक हैं और कुछ नहीं हैं। उपयोगकर्ता को सभी आवश्यक फ़ील्ड पहले देने या आवश्यक फ़ील्ड को एक साथ समूह देने और वैकल्पिक फ़ील्ड से उन्हें स्पष्ट रूप से अलग रखने का एक अच्छा तरीका है।

आप के रूप

<form> 
    <ul class="required_fields"> 
     <li> 
      <label>username</label> 
      <input /> 
     </li> 
     <li> 
      <label>email</label> 
      <input /> 
     </li> 
    </ul 
    <ul class="optional_fields"> 
      ... 
    </ul> 
</form> 

/* CSS */ 
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/ 

एक संरचना इस तरह बना सकते हैं इस दृष्टिकोण के लिए लाभ की एक संख्या हैं। आप प्रत्येक व्यक्ति को अलग-अलग संशोधित किए बिना आसानी से 'आवश्यक' समूह से आइटम जोड़ और निकाल सकते हैं। आप जितनी चाहें उतनी श्रृंखला के रूप में 'आवश्यक' कक्षा असाइन कर सकते हैं। अगर फॉर्म में 'आवश्यक' वर्ग था, तो इसमें सबकुछ आवश्यकतानुसार लेबल किया जाएगा। परिवर्तन करने के लिए कम जगहें हैं, अगर आपने फैसला किया कि 'आवश्यक' वर्ग को कुछ और कहा जाना चाहिए। और सामान्य रूप से यह दृष्टिकोण आपको अपने रूपों को व्यवस्थित करने में भी मदद करता है। आपको आवश्यक और वैकल्पिक फ़ील्ड को अंतःस्थापित नहीं करना चाहिए।

आप इसे एक कदम आगे ले सकते हैं और कुछ जावास्क्रिप्ट है जो इनपुट फ़ील्ड में आवश्यक विशेषता को इंजेक्ट करेगा।

$(".required_fields input").each(function(){ 
    this.setAttribute('required', 'required'); 
});