एक अक्षम चेकबॉक्स कैसे शैलीबद्ध करें?

Question

क्या आप जानते हैं कि यह अक्षम होने पर चेकबॉक्स को कैसे शैलीबद्ध कर सकता है?

उदाहरण के लिए:

<input type="checkbox" value="All Terrain Vehicle" 
     name="exfilter_All Terrain Vehicle" 
     id="exfilter_All_Terrain_Vehicle" 
     class="exfilter" disabled=""> 

Answer 1

का प्रयोग करें :disabledCSS3 pseudo-selector

Answer 2

आप इस तरह सीएसएस का उपयोग कर इसे चुन सकते हैं:

input[disabled] { /* css attributes */ } 

Answer 3

उपयोग सीएसएस के :disabled (CSS3 के लिए) चयनकर्ता:

checkbox-style { } 
checkbox-style:disabled { } 

या जब आप सक्षम/अक्षम करते हैं तो शैली को बदलने के लिए आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता है (माना जाता है कि यह आपके प्रश्न के आधार पर सक्षम/अक्षम किया जा रहा है)।

Answer 4

सीएसएस

input[disabled]{ 
    outline:1px solid red; // or whatever 
} 

चेकबॉक्स के लिए में विशेषता चयनकर्ता का उपयोग विशेष रूप से

पर

input[type=checkbox][disabled]{ 
    outline:1px solid red; // or whatever 
} 

उदाहरण http://www.jsfiddle.net/gaby/pxKcR/2/

Answer 5

स (रेडियो बटन और <select>) का उपयोग ओएस स्तर के घटक हैं, नहीं ब्राउज़र-स्तर। आप उनको विश्वसनीय रूप से शैलीबद्ध नहीं कर सकते जो ब्राउज़र और ऑपरेटिंग सिस्टम में सुसंगत होंगे।

इसके बजाय शीर्ष और शैली पर ओवरले डालने के लिए यह सबसे अच्छा शर्त है।

Answer 6

यह आईई भी द्वारा समर्थित है:

एचटीएमएल

class="disabled" 

सीएसएस

.disabled{ 
... 
} 

Answer 7

आप एक विकलांग चेकबॉक्स सीधे क्योंकि यह ब्राउज़र/OS के द्वारा नियंत्रित की शैली नहीं कर सकते।

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

मैं एक बुनियादी उदाहरण फेंका दिया है ताकि आप कार्रवाई में इसे देख सकते हैं:

input[type="checkbox"] { 
 
    display: none; 
 
} 
 

 
label:before { 
 
    background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
    border: 1px solid #035f8f; 
 
    height: 36px; 
 
    width: 36px; 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
input[type="checkbox"] + label:before { 
 
    content: ''; 
 
    background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
    border-color: #3d9000; 
 
    color: #96be0a; 
 
    font-size: 38px; 
 
    line-height: 35px; 
 
    text-align: center; 
 
} 
 

 
input[type="checkbox"]:disabled + label:before { 
 
    border-color: #eee; 
 
    color: #ccc; 
 
    background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); 
 
} 
 

 
input[type="checkbox"]:checked + label:before { 
 
    content: '✓'; 
 
}

<div><input id="cb1" type="checkbox" disabled checked /><label for="cb1"></label></div> 
 
<div><input id="cb2" type="checkbox" disabled /><label for="cb2"></label></div> 
 
<div><input id="cb3" type="checkbox" checked /><label for="cb3"></label></div> 
 
<div><input id="cb4" type="checkbox" /><label for="cb4"></label></div>

ब्राउज़र संगतता के अपने स्तर पर निर्भर करता है: http://jsfiddle.net/JohnSReid/pr9Lx5th/3/

यहाँ नमूना है और अभिगम्यता, कुछ अतिरिक्त बदलाव किए जाने की आवश्यकता होगी।

Answer 8

input[type='checkbox'][disabled][checked] { 
width:0px; height:0px; 
} 
input[type='checkbox'][disabled][checked]:after { 
content:'\e013'; position:absolute; 
margin-top:-10px; 
opacity: 1 !important; 
margin-left:-5px; 
font-family: 'Glyphicons Halflings'; 
font-style: normal; 
font-weight: normal; 
}