2012-03-08 15 views
14

इम में कुछ चुने हुए तत्व शैलीकृत फ़ायरफ़ॉक्स में एक <select> शैली की कोशिश कर रहा। क्रोम में मैं इसके साथ बनाया:फ़ायरफ़ॉक्स

-webkit-appearance: none; 
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right; 

लेकिन फ़ायरफ़ॉक्स पर मैं नहीं कर सकते

-moz-appearance: none; 
background: #eeeeee url("../img/select-arrow.jpg") no-repeat center right; 

किसी भी विचारों के साथ एक ही परिणाम प्राप्त करने में सक्षम होने लगते हैं? धन्यवाद।

उत्तर

10

फ़ायरफ़ॉक्स 35, "-moz-appearance:none" है कि आप पहले से ही अपने कोड में लिखा है के बाद से, अंत में तीर बटन के रूप में वांछित को हटा दें।

यह एक bug उस संस्करण के बाद से हल किया था।

9

ऐसा लगता है कि इस Firefox पर बग है: -moz-उपस्थिति: चयन तत्व के साथ कोई नहीं। अधिक जानकारी के लिए इस बग रिपोर्ट देखें: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

+0

धन्यवाद! एक बग के रूप में पुष्टि की! –

+0

मुझे यकीन नहीं है कि यह एक 'बग' है। '-मोज़-उपस्थिति के साथ: कोई भी चयन मूल रूप से एक घटक-जैसे अनाम डीओएम के माध्यम से लागू नहीं किया जाता है, जो पृष्ठ केवल शैली नहीं बना सकता है। –

+4

विश्वास नहीं कर सकता कि यह बग अभी तक तय नहीं किया गया है। – DesignerGuy

2

संपादित करें [2]: http://jsfiddle.net/sstur/2EZ9f/ (@ keska के प्रदर्शन के आधार पर: फ्लेक्स ठीक और कुछ पाठ-छाया के बाद से @ João-कुन्हा की awesome trick FF30 में काम करना बंद कर, इस नए समाधान देखने जादू)

संपादित करें: यह, शुद्ध सीएसएस का उपयोग किया जा सकता है, क्योंकि यहाँ का प्रदर्शन किया: http://jsfiddle.net/sstur/fm5Jt/

यह क्रोम, फायरफॉक्स, IE10 + में इसे शैली जाएगा और शान से पुराने IE और अन्य लीगेसी ब्राउज़र में नीचा होगा। जैसा कि आपने उल्लेख किया है, यह -webkit-appearance: none समेत विभिन्न विक्रेता-विशिष्ट कार्यवाही का उपयोग करता है।

+1

में ठीक किया गया है हाँ, यह है: http://stackoverflow.com/a/18317228/1411163 –

1

आप -moz-appearance संपत्ति के लिए अलग-अलग मान का उपयोग करने की कोशिश कर सकते हैं। उदाहरण के लिए -moz-appearance: toolbox; मेरे लिए ठीक काम करता है।

मूल्यों की पूर्ण सूची यहां पाया जा सकता: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

4

इस एक के रूप में सटीक अनुलिपि: https://stackoverflow.com/a/18317228/1411163

एक ही जवाब:

बस पता लगा फ़ायरफ़ॉक्स से तीर का चयन निकालने का तरीका। यह चाल -फिक्स-उपस्थिति, टेक्स्ट-इंडेंट और टेक्स्ट-ओवरफ्लो के मिश्रण का उपयोग करना है। यह शुद्ध सीएसएस है और इसके लिए कोई अतिरिक्त मार्कअप की आवश्यकता नहीं है।

select { 
    -moz-appearance: none; 
    text-indent: 0.01px; 
    text-overflow: ''; 
} 

विंडोज 8, उबंटू और मैक, फ़ायरफ़ॉक्स के नवीनतम संस्करणों पर परीक्षण किया गया।

लाइव उदाहरण: http://jsfiddle.net/joaocunha/RUEbp/1/

विषय पर अधिक: https://gist.github.com/joaocunha/6273016

+0

महान जोआओ लगता है!मैंने अपने जेएसफ़िल्ड को अपनी चाल को लागू करने के साथ-साथ वेबकिट और आईई को वास्तव में एक अच्छा शुद्ध सीएसएस क्रॉस-ब्राउज़र समाधान बनाने के लिए अपडेट किया है। – sstur