सीएसएस फॉर्म चेकबॉक्स के साथ चेकबॉक्स स्टाइल और टैग के बाद

मैं जावास्क्रिप्ट या JQuery का उपयोग किए बिना एक फॉर्म डिज़ाइन करने की कोशिश कर रहा हूं। इसमें चेकबॉक्स की एक श्रृंखला शामिल है। विचार चेकबॉक्स के बाद एक निश्चित gif प्रदर्शित करना है यदि यह अनचेक किया गया है। अन्यथा, इसके बाद कुछ भी प्रदर्शित नहीं करें। यह मेरे पास कोड है:सीएसएस फॉर्म चेकबॉक्स के साथ चेकबॉक्स स्टाइल और टैग के बाद

input[type=checkbox]::after 
{ 
    content: url(images/unchecked_after.gif); 
    position:relative; 
    left:15px; 
    z-index:100; 
} 
input[type=checkbox]:checked::after 
{ 
    content:""; 
}

यह क्रोम में काम करता है लेकिन फ़ायरफ़ॉक्स या आईई में काम नहीं कर रहा है। गलत क्या है?

स्रोत

2013-05-07 user1316401

'इनपुट' एक खाली सामग्री मॉडल वाला तत्व है - और चूंकि छद्म तत्वों को तत्व के बाल नोड के रूप में प्रस्तुत किया जाता है, उनके लिए लागू होते हैं, एक संघर्ष होता है। कुछ ब्राउज़र इसे वैसे भी करने की अनुमति देते हैं - कुछ नहीं करते हैं। इनपुट तत्व के बाद आपके द्वारा डाले गए तत्व को प्रारूपित करने के बजाय आसन्न भाई संयोजक का उपयोग करें। http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#adjacent-sibling-combinators – CBroe

धन्यवाद, यह बताता है। लेकिन मैं अभी भी इसे काम करने में असमर्थ हूं। उदाहरण के लिए, यदि मैं चेकबॉक्स के बाद "पी" टैग डालता हूं, तो निम्न सीएसएस चयनकर्ता काम नहीं करता है: इनपुट [प्रकार = चेकबॉक्स]: चेक + पी: – user1316401

क्रॉस-ब्राउज़र समाधान जो मेरे लिए काम करता था, चेकबॉक्स इनपुट के बाद एक खाली लेबल (वर्ग "चेकबॉक्स_ लेबल" के साथ) और फिर चेकबॉक्स के बजाय आईटी स्टाइल करना था।

input[type=checkbox] + label:after 
{ 
    content: url(images/unchecked_after.gif); 
    position:relative; 
    left:0px; 
    top:1px; 
    z-index:100; 
} 

input[type=checkbox]:checked + label:after 
{ 
    content:""; 
} 

.checkbox_label 
{ 
    height:0px; 
    width:0px; 
    display:inline-block; 
    float:left; 
    position:relative; 
    left:20px; 
    z-index:100; 
}

स्रोत

2013-05-07 23:28:32 user1316401

हे उत्तर के लिए धन्यवाद, क्या आप कुछ संदर्भ प्रदान कर सकते हैं या + ऑपरेटर क्या कहा जाता है ...? इसमें .. संदर्भ –

[element1 + element2 चयनकर्ता] (http://www.w3schools.com/cssref/sel_element_pluss.asp) तत्व 2 का चयन करता है जो तत्व 1 के तुरंत बाद जाता है। – ZitRo

जाहिर है, ::before और ::after छद्म तत्वों का उपयोग विनिर्देश द्वारा समर्थित नहीं है। आपके प्रश्न का उत्तर here है। उम्मीद है की वो मदद करदे!

स्रोत

2013-05-07 22:24:09 CoderOfHonor

के बाद मैं फ़ायरफ़ॉक्स 20 और आईई 10 में परीक्षण कर रहा हूं, यही कारण है कि मैंने सोचा कि मैं कुछ गलत कर रहा था ... लेकिन क्या? – user1316401

मैं इसे फ़ायरफ़ॉक्स के साथ jsfiddle पर आज़मा रहा हूं और आपकी त्रुटि को पुन: उत्पन्न कर सकता हूं। मुझे देखने दो कि क्या मुझे कोई फिक्स मिल सकता है। – CoderOfHonor

मुझे लगता है कि मुझे समस्या मिली है। मैंने इसे अपने जवाब में संपादित कर लिया है। – CoderOfHonor

सीएसएस फॉर्म चेकबॉक्स के साथ चेकबॉक्स स्टाइल और टैग के बाद

उत्तर

संबंधित मुद्दे