2011-12-16 35 views
7

मैं शुद्ध सीएसएस, कक्षाओं या आईडी के साथ रेडियो बटन स्टाइल करना चाहता हूं। बस इनपुट [प्रकार = रेडियो]। मैं अचयनित और चयनित के लिए पृष्ठभूमि छवि का उपयोग करना चाहता हूं। हालांकि, -वेंडर-उपस्थिति: कोई नहीं; ट्राइडेंट या गेको के साथ काम नहीं करता है। बस वेबकिट। उन ब्राउज़रों में आप रेडियो बटन के लिए एक पृष्ठभूमि के रूप में पृष्ठभूमि छवि देख सकते हैं लेकिन बटन बस, छवि प्रदर्शित कैसे मैं बटन तो बस पृष्ठभूमि छवि प्रदर्शित करता है से छुटकारा पा सकते बजाय अभी भी वहाँ है। बेला: http://jsfiddle.net/7kScn/रेडियो बटन स्टाइलिंग

उत्तर

8

आप एक रेडियो समूह से कनेक्ट और तुरंत बाद अन्य सामग्री प्रदर्शित करने के लिए एक सीएसएस 2 चयनकर्ता चाल का उपयोग कर सकते हैं।

देखें: http://jsfiddle.net/7kScn/1/

यह सिर्फ एक बुनियादी उदाहरण है, लेकिन यह इनपुट क्षेत्र छुपा है और फिर इसे तुरंत बाद लेबल स्टाइल के आधार पर चल रही है, यह प्रभाव है कि यह वास्तविक बात की जाँच कर रहे है दे रही है ।

+0

CSS3? :(यह एक ई-कॉमर्स साइट की कार्यक्षमता में से कोई भी CSS3 के आधार पर किया जा सकता है बस शैली है, तो इसे वापस गिर जाता है जैसे यह सामान्य रूप से ज्यादा संभावना थी कि स्वीकार्य है, लेकिन अगर आप 'कॉल कर रहे हैं प्रदर्शन चेक बॉक्स प्रदर्शित करने के लिए:। कोई नहीं;' से मैं वास्तव में उपयोग कर सकते हैं नहीं। – henryaaron

+0

करने के लिए [इस अनुकूलता चार्ट] (http://www.quirksmode.org/css/contents.html), इस विशिष्ट चयनकर्ता अपनी वर्तमान स्थिति में ठीक काम करना चाहिए अनुसार। यह IE6 में केवल असमर्थित है (के बारे में IE7/8 के लिए स्थिर उन नोटों इसे इस उपयोग को प्रभावित नहीं है)। यह सीएसएस 2 (?)। – animuson

+0

किया गया है प्रतीत होता है लेकिन मेरी साइट लेबल का उपयोग नहीं करता है, यह कैसे लेबल के बिना काम करेंगे – henryaaron

1

क्या इसका उपयोग है? इनपुट [प्रकार = रेडियो]: चेक किया गया { सीमा: 1 पीएक्स ठोस काला; }

0

मैं कैसे चेक बॉक्स और सीएसएस के साथ रेडियो अनुकूलित करने के लिए केवल, साथ ही लेबल स्टाइल और यह :before और :after pseudoclasses का उपयोग कर के माध्यम से/बंद स्विच पर बनाने के बारे में एक ट्यूटोरियल लिखा था। शायद यह मदद करता है :) इसे यहां पढ़ें: http://blog.felixhagspiel.de/index.php/posts/custom-inputs