मैं एक ग्रिड में विकलांग चेक बॉक्स के लिए सीएसएस बदल चाहते हैं (वे भी उपयोगकर्ताओं के लिए देखने के लिए मुश्किल कर रहे हैं)। यह करने के लिए एक आसान तरीका क्या है?
प्रौद्योगिकियों में मेरी प्राथमिकता इस्तेमाल किया (घटते क्रम में):
सीएसएस
जावास्क्रिप्ट
jQuery
अन्य
Ive कुछ जे एस पुस्तकालयों के साथ अच्छी किस्मत काम करना था। मेरी आवश्यकता दी बक्से मानक चेक बॉक्स से बहुत अलग दिखाने के लिए किया गया था। निम्नलिखित पुस्तकालय भी 508 अनुरूप है।
मूल रूप से, आप div, पी, या एक ग्रिड के लिए इस्तेमाल किसी अन्य तत्व पर ऑनक्लिक ईवेंट संलग्न करने के लिए और फिर छिपा हुआ एक ग्रिड में है कि क्षेत्र से जुड़े तत्व में जाँच की मूल्य हस्तांतरण की जरूरत है। जो बहुत मामूली बात है, अगर जावास्क्रिप्ट प्रयोग किया जाता है - किसी भी तत्व पर onclick घटना जोड़ने के लिए jQuery की जाँच करें। यदि क्लिक किया, छिपा तत्व के लिए मूल्य = 1 निर्धारित किया है।
मैं पृष्ठभूमि (का रंग बदलने सुझाव देंगे background-colorप्रपत्र / fieldset के), और यदि आप एक बेहतर विपरीत के साथ आ सकते हैं। (? गैर चयन) तुम सिर्फ विकलांग का रंग बदलना चाहते हैं चेक बॉक्स तुम कोशिश कर सकते हैं:
input[disabled] {
...
/* CSS here */
...
}
लेकिन अगर वे एक कारण के लिए विकलांग हो, निश्चित रूप से वे प्रमुखता से दिखाई दे सकता है की जरूरत नहीं है? उनके जा रहा है सलेटी रंग-आउट के लिए उद्देश्य सक्रिय / सक्षम है और निष्क्रिय / विकलांग प्रपत्र तत्वों के बीच भ्रम की स्थिति से बचने के लिए निश्चित रूप से, है?
input:disabled {}हर ब्राउज़र को छोड़कर-आप इसे-आईई अनुमान लगाया के लिए काम करता है। आईई के लिए, मुझे लगता है कि आप कुछ जे एस पुस्तकालय का उपयोग करना होगा।
चेकबॉक्स सक्षम बनाए रखें, लेकिन फिर जोड़ने onfocus=this.blur()तो यह उन पर क्लिक नहीं किया जा सकता है चेकबॉक्स को।
या ASP.net का उपयोग कर रहे हैं (जैसा कि आप अपनी टिप्पणी में कहते हैं) चेकबॉक्स सक्षम करने के लिए सेट रखने के लिए और Page.Load घटना के लिए निम्नलिखित जोड़ें:
CheckBox1.Attributes.Add("onclick", "return false;");
आप सक्षम है और विकलांग चेक बॉक्स के मिश्रण के साथ ऐसे स्वरूप में हैं, विकलांग चेक बॉक्स बाहर फीका होने उपयोगकर्ता के लिए भ्रम की स्थिति से बचा जाता है। तो छवियों के साथ चेकबॉक्स इनपुट तत्वों की जगह (उदा। उत्पाद विकल्प खरीदारी की रसीद पर चयनित दिखाने के लिए) इरादा चेक बॉक्स के साथ एक केवल देखने के लिए पृष्ठ देखने के लिए है, तो बेहतर परिणाम प्रदर्शित हो सकती हैं।
बदलने के
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
साथ में
<img src="unchecked.gif">
<img src="checked.gif">
थोड़ा CSS3 के साथ वास्तव में आप एक बहुत ही साधारण समाधान नकली कर सकते हैं। तुम हमेशा विचार करने के लिए समर्थन की किस तरह आप की पेशकश करना चाहते हैं होगा। लेकिन अगर आप यह आधुनिक ब्राउज़रों पर काम के साथ ठीक कर रहे हैं, बस इसे जाने दे।
यहाँ एचटीएमएल है
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
यहाँ सीएसएस है
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
और यहाँ डेमो है http://jsfiddle.net/DyjmM/