सीएसएस - कैसे एक चयनित रेडियो बटन लेबल शैली के लिए?

Question

मैं रेडियो बटन के चयनित लेबल में एक शैली जोड़ना चाहता हूं:

HTML:

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked>All</label>
 <label><input type="radio" value="false">Open</label>
 <label><input type="radio" value="true">Archived</label>
</div>

सीएसएस

.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
    background:Red;
    border:1px solid green;
    padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

किसी भी विचार मैं गलत क्या कर रहा हूँ?

Answer 1

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

<div class="radio-toolbar">
  <input type="radio" id="radio1" name="radios" value="all" checked>
  <label for="radio1">All</label>

  <input type="radio" id="radio2" name="radios" value="false">
  <label for="radio2">Open</label>

  <input type="radio" id="radio3" name="radios" value="true">
  <label for="radio3">Archived</label>
</div>

सबसे पहले, आप शायद nameरेडियो बटन पर विशेषता जोड़ना चाहते हैं। अन्यथा, वे एक ही समूह का हिस्सा नहीं हैं, और कई रेडियो बटन चेक किए जा सकते हैं।

इसके अलावा, चूंकि मैंने लेबल को भाई-बहन (रेडियो बटन) के रूप में रखा था, इसलिए मुझे उन्हें एक साथ जोड़ने के लिए विशेषताओं idऔर forविशेषताओं का उपयोग करना पड़ा ।

Comments

@ जॉनक यह सच है। IE8 :checkedचयनकर्ता को लागू नहीं करता है ।

— 30इम विद्यास

अगर मैं न तो इनपुट [प्रकार = "रेडियो"] या इनपुट [प्रकार = "चेकबॉक्स"] का चयन करना चाहता हूं। यह केवल एक नियम में करने के लिए सही सिंटैक्स है और क्या करने से बचें: इनपुट [प्रकार = "रेडियो"], इनपुट [प्रकार = "चेकबॉक्स"]

— fabregas88

@ fabregas88 आप उन तत्वों के लिए एक CSS वर्ग जोड़ सकते हैं, और फिर.foo { ... }

— reime Vidas

आपने बस कीबोर्ड एक्सेस को मार दिया! आशा है कि आपके सभी उपयोगकर्ता सक्षम हैं। ... अब, यदि आप केवल रेडियो बटन को वहां रखते हैं, display:none;तो उपयोग किए बिना तो ब्राउज़र इसे ठीक कीबोर्ड के साथ काम करेंगे।

— जीसीबी

@gcb यह सवाल था कि मानक रेडियो बटन को कैसे छिपाया जाए। मैंने यह प्रोटोटाइप jsbin.com/miwati/edit?html,css,output बनाया है । रेडियो बटन बिल्कुल लेबल के पीछे स्थित हैं। शायद सबसे अच्छा तरीका नहीं है।

— 58इमे विद्या

Answer 2

यदि आप वास्तव में चेकबॉक्स को लेबल के अंदर रखना चाहते हैं, तो एक अतिरिक्त स्पैन टैग जोड़कर देखें।

एचटीएमएल

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked><span>All</span></label>
 <label><input type="radio" value="false"><span>Open</span></label>
 <label><input type="radio" value="true"><span>Archived</span></label>
</div>

सीएसएस

.radio-toolbar input[type="radio"]:checked ~ * { 
    background:pink !important;
}

यह चयनित रेडियो बटन के सभी भाई-बहनों के लिए पृष्ठभूमि निर्धारित करेगा।

Comments

मैंने इस दृष्टिकोण को प्राथमिकता दी, हालांकि मैंने नीचे बताए अनुसार एक अलग चयनकर्ता ('+') का उपयोग किया और इस प्रश्न में कि मैं चयनित आइटम को स्टाइल करना चाहता था। इसने मुझे forविशेषताओं के बारे में चिंता नहीं करने की अनुमति दी ।

— ब्रिचिन्स

Answer 3

जब आप भाई +-बहन नहीं होते हैं तो आप आसन्न भाई चयनकर्ता ( ) का उपयोग कर रहे होते हैं। लेबल इनपुट का जनक है, न कि यह सिबलिंग है।

CSS के पास वंश के आधार पर एक तत्व का चयन करने का कोई तरीका नहीं है (और न ही कुछ भी जो इसका अनुसरण करता है)।

इसे हल करने के लिए आपको जावास्क्रिप्ट देखना होगा।

वैकल्पिक रूप से, अपने मार्कअप को फिर से व्यवस्थित करें:

<input id="foo"><label for="foo">…</label>

Answer 4

आप अपने html और css में एक स्पैन जोड़ सकते हैं।

यहाँ मेरे कोड से एक उदाहरण है ...

HTML (JSX):

<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>  
<label for="radiostyle1"><span></span> am  </label>

<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm  </label>

सीएसएस मानक रेडियो बटन को स्क्रीन पर गायब कर देता है और कस्टम बटन छवि को सुपरमिज़ कर देता है:

input[type="radio"] {  
    opacity:0;                                      
}

input[type="radio"] + label {
    font-size:1em;
    text-transform: uppercase;
    color: white ;  
    cursor: pointer;
    margin:auto 15px auto auto;                    
}

input[type="radio"] + label span {
    display:inline-block;
    width:30px;
    height:10px;
    margin:1px 0px 0 -30px;                       
    cursor:pointer;
    border-radius: 20%;
}


input[type="radio"] + label span {
    background-color: #FFFFFF 
}


input[type="radio"]:checked + label span{
     background-color: #660006;  
}

Answer 5

जैसा कि वर्तमान में माता-पिता की शैली के लिए कोई सीएसएस समाधान नहीं है, मैं एक साधारण jQuery का उपयोग यहां एक वर्ग को लेबल के साथ एक वर्ग जोड़ने के लिए करता हूं।

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});

प्री-चेक किए गए इनपुट के लेबल को checkedlabelभी क्लास देना न भूलें

Answer 6

यहाँ एक सुलभ उपाय है

label {
  position: relative;
}

label input {
  position: absolute;
  opacity: 0;
}

label:focus-within {
  outline: 1px solid orange;
}

<div class="radio-toolbar">
  <label><input type="radio" value="all" checked>All</label>
  <label><input type="radio" value="false">Open</label>
  <label><input type="radio" value="true">Archived</label>
</div>