क्या संबंधित चेकबॉक्स की जाँच करने पर लेबल का रंग बदलने का एक गैर-जावास्क्रिप्ट तरीका है?
जवाबों:
यदि आपके पास है
<div>
<input type="checkbox" class="check-with-label" id="idinput" />
<label class="label-for-check" for="idinput">My Label</label>
</div>तुम कर सकते हो
.check-with-label:checked + .label-for-check {
font-weight: bold;
}इस काम को देखें । ध्यान दें कि यह गैर-आधुनिक ब्राउज़रों में काम नहीं करेगा।
:checkedचयनकर्ता IE9 में समर्थित के रूप में सूचीबद्ध हैं। Microsoft के अपने डॉक्स इसकी पुष्टि करते हैं।
<label>वांछित से कई गुना अधिक मेल खा सकता है ।
मुझे एंड्रयू का सुझाव पसंद है, और वास्तव में सीएसएस नियम केवल होना चाहिए:
:checked + label {
font-weight: bold;
}मैं labelऔर inputतत्व के निहित संघ पर भरोसा करना पसंद करता हूं, इसलिए मैं इस तरह से कुछ करूंगा:
<label>
<input type="checkbox"/>
<span>Bah</span>
</label>सीएसएस के साथ:
:checked + span {
font-weight: bold;
}:checked { box-shadow: 0 0 0 500px orange; }। आपको यह सुनिश्चित करने के लिए z- इंडेक्स के साथ खेलने की आवश्यकता होगी कि कोई भी भ्रामक तत्व छिपा नहीं है।
यह :checkedरूपों को और अधिक सुलभ बनाने के लिए छद्म वर्ग का उपयोग करने का एक उदाहरण है । :checkedछद्म वर्ग जैसे छवि दीर्घाओं के रूप में इंटरएक्टिव विजेट, निर्माण करने के लिए छिपा हुआ आदानों और उनके दृश्यमान लेबल के साथ प्रयोग किया जा सकता है। मैंने उन लोगों के लिए स्निप बनाया, जो टेस्ट करना चाहते हैं।
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
} <input type="checkbox" id="cb_name" name="cb_name">
<label for="cb_name">CSS is Awesome</label> आप अकेले सीएसएस के साथ ऐसा नहीं कर सकते। JQuery का उपयोग करके आप कर सकते हैं
एचटीएमएल
<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />सीएसएस
.highlight{
background:yellow;
}jQuery
$('#check').click(function(){
$('#lab').toggleClass('highlight')
})यह सभी ब्राउज़रों में काम करेगा
:checkedछद्म चयनकर्ता CSS3 की विशेषता है।