सीएसएस/एचटीएमएल: मैं चेकबॉक्स इनपुट के भीतर चेक मार्क का रंग कैसे बदलूं?

Question

मैं HTML चेकबॉक्स इनपुट के भीतर चेक मार्क का रंग कैसे बदलूं?

Answer 1

आप एक चेकबॉक्स छवि बनाने और प्रयोग है कि आपके चेकबॉक्स रूप

निम्नलिखित पोस्ट कस्टम इनपुट नियंत्रण पर चर्चा कर सकता है ...

http://www.thecssninja.com/css/custom-inputs-using-css

Answer 2

आप किसी अन्य तत्व और सेट के साथ एक चेक बॉक्स की नकल कर सकते हैं वांछित के रूप में पृष्ठभूमि रंग।

http://jsfiddle.net/ApHME/

मैं इसे सही, बस अवधारणा को प्रदर्शित करने के लिए बनाने के लिए प्रयास नहीं किया है। जैसा कि आप देख सकते हैं, पृष्ठभूमि रंग हरा है, कोई छवि नहीं, कोई पुस्तकालय शामिल नहीं है; न्यूनतम जेएस

---

WAIT !!!
एमवीसी purists और अन्य fanatics - आप आसानी से जेएस को अपनी छोटी विधि में ले जा सकते हैं, लेकिन सादगी का प्रदर्शन करने के लिए कोशिश कर रहा है - सुंदर कृपया इसके लिए मुझे वोट मत दें।
श्वास।

Answer 3

यहां एक शुद्ध सीएसएस समाधान है जो स्क्रीन पाठकों या डिफ़ॉल्ट उपयोगकर्ता एजेंट कार्यों को तोड़ना नहीं चाहिए। इसके अतिरिक्त, यह बड़े 4 ब्राउज़रों के नवीनतम संस्करणों में समर्थित है (और कुछ अन्य यदि आप कुछ अतिरिक्त हैक्स जोड़ते हैं, लेकिन मैं इसे समझने के लिए आपको छोड़ दूंगा; शायद यह IE8 + समर्थन से अधिक नहीं होगा क्योंकि यह उपयोग करता है छद्म तत्व)।

विचार वास्तविक रूप तत्व को छिपाना है (क्योंकि ब्राउज़र आंतरिक शैलियों के साथ एक कठिन प्रतिस्थापन करते हैं और अभी तक सभी शैली-क्षमता को सीएसएस तक नहीं दिखाते हैं) और इसे एक जैसा पसंद करते हैं। एक तरफ प्रभाव यह है कि यदि आप की आवश्यकता है तो आप अपने जेएस में ईवेंट पर क्लिक करने के बजाय परिवर्तन घटनाओं को ट्रैक करना चाहते हैं (लेकिन आप वैसे भी कर रहे थे?)।

क्योंकि लेबल यह काम करता है की तरह एक उम्मीद होती है पर क्लिक प्रपत्र तत्व से जुड़ा हुआ है, इसलिए नए, भयानक, चेकबॉक्स (::before) का हनन करता है, तो यह checked है की जाँच करने के मूल पर चयनकर्ताओं ([checked]) जोड़कर देखते हैं। जब यह चेक किया जाता है तो यह हमारे awesomer चेकमार्क (::after) प्रदर्शित करेगा।

चेकमार्क (::after) आइटम की तरह चेकमार्क बनाने के लिए मोटाई और ऊंचाई/चौड़ाई के लिए सीमा चौड़ाई का दुरुपयोग करता है। अंत में, हम कोण को ठीक से मिलान करने के लिए बॉक्स 45deg को बदल देते हैं।

चेकमार्क का रंग बदलने के लिए, ::after शैली पर सीमा रंग बदलें। इसके अतिरिक्त, यदि आप चाहते थे कि यह हमेशा आपके टेक्स्ट रंग से मेल खाता हो, तो उस पर सीमा रंग हटा दें। रेडियो बदलने के लिए, रेडियल ग्रेडियेंट स्टार्ट रंग बदलें (वह जो सफेद नहीं है)।

भी भयानक है कि इसके आकार फ़ॉन्ट के, इसलिए यदि आपके पाठ बड़ा है, यह सही शिम चाहिए (हालांकि जब रिश्तेदार फ़ॉन्ट आकार का उपयोग करते हुए राउंडिंग त्रुटियों भी हो सकता है, इसलिए सावधान रहना) बंधे

मैंने शामिल किया है चेक-सक्षम प्रकारों (चेकबॉक्स और रेडियो) दोनों के लिए मूल शैलियों।

HTML:

<fieldset> 
    <legend>Checkbox example</legend> 
    <input id="checkbox" type="checkbox"/> 
    <label for="checkbox">Some awesome checkbox label</label> 
</fieldset> 
<fieldset> 
    <legend>Radio example</legend> 
    <div> 
     <input id="radio1" type="radio" name="radio"/> 
     <label for="radio1">Some awesome radio option #1</label> 
    <div> 
    </div> 
     <input id="radio2" type="radio" name="radio"/> 
     <label for="radio2">Some awesome radio option #2</label> 
    </div> 
</fieldset> 

सीएसएस:

label, input[type="radio"], input[type="checkbox"] { 
    line-height: 2.1ex; 
} 

input[type="radio"], 
input[type="checkbox"] { 
    position: absolute; 
    left: -999em; 
} 

input[type="radio"] + label, 
input[type="checkbox"] + label { 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
} 

input[type="radio"] + label::before, 
input[type="checkbox"] + label::before { 
    content: ""; 
    display: inline-block; 
    vertical-align: -25%; 
    height: 2ex; 
    width: 2ex; 
    background-color: white; 
    border: 1px solid rgb(166, 166, 166); 
    border-radius: 4px; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.25); 
    margin-right: 0.5em; 
} 

input[type="radio"]:checked + label::before { 
    background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex); 
} 

input[type="radio"] + label::before { 
    border-radius: 50%; 
} 

input[type="checkbox"]:checked + label::after { 
    content: ''; 
    position: absolute; 
    width: 1.2ex; 
    height: 0.4ex; 
    background: rgba(0, 0, 0, 0); 
    top: 0.9ex; 
    left: 0.4ex; 
    border: 3px solid #1062a4; 
    border-top: none; 
    border-right: none; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

साइड नोट: necropost क्योंकि यह पहला सवाल है कि ऊपर पॉप जब मैं याद करने की कोशिश कर रहा था मैं यह कैसे खींचा था भूतकाल में। ;)