चेक किए गए रेडियो बटन के लेबल के लिए सीएसएस चयनकर्ता

Question

क्या चेस्ड रेडियो बटन के लेबल पर css (3) स्टाइल लागू करना संभव है?

मेरे पास निम्नलिखित मार्कअप है:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

मैं जो उम्मीद कर रहा था, वह है

label:checked { font-weight: bold; }

कुछ करना होगा, लेकिन अफसोस यह नहीं है (जैसा कि मुझे उम्मीद थी)।

क्या कोई चयनकर्ता है जो इस प्रकार की कार्यक्षमता प्राप्त कर सकता है? यदि आप मदद करता है तो आप divs आदि से घिरे रह सकते हैं, लेकिन सबसे अच्छा समाधान वह होगा जो '' '' विशेषता के लिए लेबल का उपयोग करता है।

यह ध्यान दिया जाना चाहिए कि मैं अपने आवेदन के लिए ब्राउज़रों को निर्दिष्ट करने में सक्षम हूं, इसलिए कृपया सर्वश्रेष्ठ वर्ग सीएसएस 3 आदि।

Answer 1

+प्रतीक का प्रयास करें : यह आसन्न सिबलिंग कॉम्बिनेटर है। यह एक ही माता-पिता होने वाले सरल चयनकर्ताओं के दो अनुक्रमों को जोड़ती है और दूसरे को IMMEDIATELY आना चाहिए को पहले के बाद ।

जैसे की:

input[type="radio"]:checked+label{ font-weight: bold; } 
 //a label that immediately follows an input of type radio that is checked 

निम्नलिखित मार्कअप के लिए बहुत अच्छी तरह से काम करता है:

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

... और यह divs आदि के साथ या बिना किसी भी संरचना के लिए काम करेगा, जब तक लेबल रेडियो इनपुट का अनुसरण करता है।

उदाहरण:

input[type="radio"]:checked+label { font-weight: bold; }

<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>

Comments

क्या ऐसा करने के लिए कुछ भी है, लेकिन लेबल में प्राथमिक तत्व ईजी होने के साथ:<label for="rad1">Radio 1</label><input id="rad1" type="radio" name="rad">

— नाथन कोप

आप ~भाई-बहन के तत्वों का चयन करने के लिए एक टिल्डा का उपयोग कर सकते हैं जो जरूरी नहीं कि आसन्न हैं। css-tricks.com/child-and-sibling-selectors

— मार्टिन

धन्यवाद, इससे मुझे बिना जेएस के "इमेज रेडियो बटन" बनाने में मदद मिली।

— किलरएक्स

यह ध्यान देने योग्य है कि यह IE 8 में काम नहीं करेगा, क्योंकि :checkedचयनकर्ता समर्थित नहीं है ।

— मार्क अमेरी

@Martin यदि आप सोच रहे हैं, तो यह वास्तव में आपके मामले में काम नहीं करेगा, क्योंकि लेबल को अभी भी इनपुट का पालन करने की आवश्यकता है । '+' और '~' के बीच का अंतर यह है कि क्या लेबल सीधे आसन्न है, या आमतौर पर आसन्न है : क्या लेबल अगला तत्व है, या केवल अगले तत्वों में से एक है।

— नजॉर्ड

Answer 2

मुझे पता है कि यह एक पुराना सवाल है, लेकिन अगर आप अलग होने <input>के <label>बजाय एक बच्चा होना चाहते हैं, तो यहां एक शुद्ध सीएसएस तरीका है जिसे आप इसे पूरा कर सकते हैं:

:checked + span { font-weight: bold; }

तो बस एक के साथ पाठ लपेटो <span>:

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

इसे JSFiddle पर देखें ।

Comments

अति उत्कृष्ट। यह बहुत उपयोगी है जब रेजर की स्थिति से निपटने के दौरान <label>@Html.RadioButtonFor(..) someText<label>, मैंने <span>"someText" के आसपास फेंक दिया और यह एक आकर्षण की तरह काम किया। धन्यवाद!

— S1r-Lanzelot

अच्छा! यह नहीं सोचा था।

— मैथ्यू डीन

मुझे जिस चीज की जरूरत थी! धन्यवाद।

— रयान

क्या होगा यदि आप शैली करना चाहते हैं: सक्रिय लेबल के साथ: जाँच की गई? यह वास्तव में एक समाधान नहीं है।

— मैकीज क्रैजकंक

@MaciejKrawczyk यह आपके लिए कोई समाधान नहीं है क्योंकि आपका उपयोग मामला पूरी तरह से अलग है। यदि आप एक: सक्रिय लेबल को स्टाइल करना चाहते हैं तो आप कर सकते हैं label:active { font-weight: bold; }। देखें: jsfiddle.net/Gbq8Z/608 (वाह, मैं विश्वास नहीं कर सकता कि फ़ाइडल को 608 बार फोर्क किया गया है)।

— माइक

Answer 3

मैं भूल जाता हूं कि मैंने पहली बार इसका उल्लेख कहां देखा था, लेकिन जब तक आपके पास for=विशेषता सेट है, तब तक आप अपने लेबल को कंटेनर में कहीं और एम्बेड कर सकते हैं । तो, चलो SO पर एक नमूना देखें:

* {
  padding: 0;
  margin: 0;
  background-color: #262626;
  color: white;
}

.radio-button {
  display: none;
}

#filter {
  display: flex;
  justify-content: center;
}

.filter-label {
  display: inline-block;
  border: 4px solid green;
  padding: 10px 20px;
  font-size: 1.4em;
  text-align: center;
  cursor: pointer;
}

main {
  clear: left;
}

.content {
  padding: 3% 10%;
  display: none;
}

h1 {
  font-size: 2em;
}

.date {
  padding: 5px 30px;
  font-style: italic;
}

.filter-label:hover {
  background-color: #505050;
}

#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
  background-color: green;
}

#featured-radio:checked~main .featured {
  display: block;
}

#personal-radio:checked~main .personal {
  display: block;
}

#tech-radio:checked~main .tech {
  display: block;
}

<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">

<header id="filter">
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>

<main>
  <article class="content featured tech">
    <header>
      <h1>Cool Stuff</h1>
      <h3 class="date">Today</h3>
    </header>

    <p>
      I'm showing cool stuff in this article!
    </p>
  </article>

  <article class="content personal">
    <header>
      <h1>Not As Cool</h1>
      <h3 class="date">Tuesday</h3>
    </header>

    <p>
      This stuff isn't nearly as cool for some reason :(;
    </p>
  </article>

  <article class="content tech">
    <header>
      <h1>Cool Tech Article</h1>
      <h3 class="date">Last Monday</h3>
    </header>

    <p>
      This article has awesome stuff all over it!
    </p>
  </article>

  <article class="content featured personal">
    <header>
      <h1>Cool Personal Article</h1>
      <h3 class="date">Two Fridays Ago</h3>
    </header>

    <p>
      This article talks about how I got a job at a cool startup because I rock!
    </p>
  </article>
</main>

वाह। यह एक "नमूना" के लिए बहुत कुछ था, लेकिन मुझे लगता है कि यह वास्तव में प्रभाव और बिंदु को घर ले जाता है: हम निश्चित रूप से एक जाँच इनपुट नियंत्रण के लिए एक लेबल का चयन कर सकते हैं, यह एक भाई के बिना। रहस्य केवल एक बच्चे को टैग रखने में निहित है कि उन्हें क्या होना चाहिए (इस मामले में - केवल तत्व)inputbody ।

चूंकि labelतत्व वास्तव में :checkedछद्म चयनकर्ता का उपयोग नहीं करता है , यह कोई फर्क नहीं पड़ता कि लेबल में संग्रहीत हैं header। इसका अतिरिक्त लाभ यह है कि चूंकि headerएक सहोदर तत्व है, हम ~जेनेरिक सिबलिंग चयनकर्ता का उपयोग input[type=radio]:checkedडोम तत्व से headerकंटेनर में जाने के लिए कर सकते हैं और फिर वंशज / बच्चे के चयनकर्ताओं का उपयोग labelस्वयं करने के लिए कर सकते हैं, जिससे शैली की क्षमता की अनुमति मिलती है। संबंधित रेडियो बॉक्स / चेकबॉक्स चुने गए हैं ।

न केवल हम लेबल को स्टाइल कर सकते हैं, बल्कि अन्य सामग्री को भी स्टाइल कर सकते हैं जो सभी के सापेक्ष एक सिबलिंग कंटेनर के वंशज हो सकते हैं input। और अब इस पल का आप सभी को इंतजार है, JSFIDDLE ! वहां जाओ, इसके साथ खेलो, इसे तुम्हारे लिए काम करो, पता करो कि यह क्यों काम करता है, इसे तोड़ो, तुम क्या करते हो!

उम्मीद है कि सभी समझ में आता है और पूरी तरह से सवाल का जवाब देता है और संभवतः कोई भी अनुवर्ती फसल हो सकती है।

Comments

यह इस सवाल का जवाब है। अन्य सही होते हुए भी अनिवार्य रूप से सुपर बेसिक हैं। हालांकि यह कुछ अधिक जटिल और दिलचस्प है, कि एक के लिए js हड़पने के लिए परीक्षा होगी।

— मॉर्फल्स

इस प्रश्न का स्वीकृत उत्तर> 30x के रूप में कई upvotes के बावजूद एक सीमा है कि यह जवाब पूरी तरह से कम करता है। मन को उड़ाने वाली जानकारी रखने वाले कई समान-सम्मोहित पोस्टों के विपरीत, यह वास्तव में दावे पर बचाता है। अद्भुत काम, बहुत बहुत धन्यवाद।

— naughtilus

@naughtilus - यह उत्तर पूरी तरह से सरल उत्तर की सीमा को कम करता है, क्योंकि यह प्रत्येक विकल्प के लिए शैलियों को स्पष्ट रूप से परिभाषित करता है। यानी खान आपको एक संरचना सम्मेलन करने के लिए विवश करता है; यह आपको हर रेडियो बटन और परिणाम के लिए सीएसएस लिखने में बाधा डालता है।

— स्टीफन

@morphles सरल! = "सुपर बेसिक": यह समाधान अधिक जटिल, दिलचस्प और शक्तिशाली है - इस सटीक कोड के लिए; खदान 1 कन्वेंशन के सभी पेजों पर काम करेगा

— स्टीफन

Answer 4

यदि आपका इनपुट चाइल्ड एलिमेंट है labelऔर आपके पास एक से अधिक लेबल हैं, तो आप @ माइक की ट्रिक को Flexbox+ से जोड़ सकते हैं order।

एचटीएमएल

<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

सीएसएस

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

इसे JSFiddle पर देखें ।

नोट: सिबलिंग सिलेक्टर केवल एक ही अभिभावक के भीतर काम करता है। इसके चारों ओर काम करने के लिए, आप @Nathan Blair हैक का उपयोग करके इनपुट को शीर्ष-स्तर पर छिपा सकते हैं ।

Answer 5

आप jQuery के एक बिट का उपयोग कर सकते हैं:

$('input:radio').click(function(){
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});

आपको यह सुनिश्चित करने की आवश्यकता होगी कि आपके चेक किए गए रेडियो बटन में पेज लोड के साथ-साथ सही क्लास भी हो।

Comments

हां ... यह जावास्क्रिप्ट (चौखटे) के माध्यम से करना संभव है, लेकिन यह उतना सरल नहीं है जितना लगता है। यदि कुछ और पहले से ही बॉक्स की जाँच कर ले तो क्या होगा? यदि एक ही समूह के दूसरे रेडियो को चुना जाता है तो कौन सी स्क्रिप्ट इस वर्ग को हटा देगी? यह वास्तव में बहुत जल्दी जटिल हो जाता है। मैं ब्राउज़र के अंतर्निहित रूप + सीएसएस कार्यक्षमता का उपयोग करना चाहता हूं क्योंकि यह हर बार काम करेगा।

— स्टीफन

आपका चयनकर्ता होना चाहिए$('label[for="' + $(this).attr('id') + '"]').toggleClass();

— वेसली मर्च

Answer 6

अपडेट करें:

यह केवल मेरे लिए काम करता है क्योंकि हमारे मौजूदा उत्पन्न html निराला था, labelएस के साथ उत्पन्न कर radioरहा है और उन दोनों को checkedविशेषता दे रहा है ।

कोई बात नहीं, और Brilliand के लिए बड़ा अप इसे लाने के लिए!

यदि आपका लेबल एक चेकबॉक्स का सिबलिंग है (जो आमतौर पर मामला है), तो आप ~सिबलिंग चयनकर्ता का उपयोग कर सकते हैं , और label[for=your_checkbox_id]इसे संबोधित करने के लिए ... या लेबल को एक आईडी दे सकते हैं यदि आपके पास कई लेबल हैं (जैसे कि इस उदाहरण में जहां मैं हूं बटन के लिए लेबल का उपयोग करें)

---

उसी की तलाश में यहां आया था - लेकिन डॉक्स में मेरा जवाब ढूंढना समाप्त कर दिया ।

विशेषता वाले एक labelतत्व को इस checkedतरह चुना जा सकता है:

label[checked] {
  ...
}

मुझे पता है कि यह एक पुराना सवाल है, लेकिन शायद यह किसी को वहाँ से बाहर निकालने में मदद करता है :)

Comments

और लेबल की जाँच कैसे की जानी चाहिए?

— Brilliand

अरे, अच्छा पकड़। यह नहीं है जाहिरा तौर पर हमारे पास कुछ सुंदर निराला कोड हैं जो रेडियो बटन के साथ-साथ लेबल भी उत्पन्न करते हैं, और html उत्पन्न करते समय दोनों में "चेक" विशेषता जोड़ते हैं। लेकिन यह वास्तव में मान्य नहीं है ... इसलिए यह पूरी तरह से अनुपयोगी है। मैं उत्तर को संपादित करूंगा, मुझे कोई सुराग नहीं है कि मुझे इसके लिए उत्थान क्यों मिला। धन्यवाद!

— अपरेंटिसडेव