दिलचस्प पोस्ट
HTML <चयन करें> चयनित विकल्प पृष्ठभूमि रंग सीएसएस शैली क्या कोई C ++ क्लास सदस्य फ़ंक्शन टेम्पलेट आभासी हो सकता है? एक ही एएसपी.नेट एमवीसी एक्शन के कारण कई युगपत AJAX कॉल करने से ब्राउज़र को ब्लॉक करने के कारण क्यों? जावास्क्रिप्ट: मैं JSONP कैसे बनाऊँ? कैसे एक बैच फ़ाइल के साथ FTP? गतिविधियों के बीच वस्तुओं की सरणी सूची AVCaptureVideoPreviewLayer को "फ़िल्टर" कैसे लागू करें WCF सेवा अनुबंध इंटरफ़ेस के विभिन्न रूप एक्सएमएल को पाइथन शब्दकोश को सीरियल करना आंशिक रूप से प्रस्तुत करने से पहले escape_javascript क्यों? एक्सेलेरोमीटर द्वारा दूरी बढ़ा दी गई प्रतिक्रिया: मैं setState पर state.item को कैसे अपडेट कर सकता हूं? (JSFiddle के साथ) XMPP या किसी भी अन्य स्क्रिप्ट का उपयोग किए बिना FCM का उपयोग करके डिवाइस अधिसूचना को डिवाइस कैसे भेजें।? गैर-काली पृष्ठभूमि रंग के साथ जीपीजी में पारदर्शी पीएनजी कन्वर्ट करें गतिशील रूप से बनाए गए तत्वों पर डेटपाकर () डालकर – JQuery / JQueryUI

IE8 और IE9 में ड्रॉप डाउन ऐरो कैसे छिपाएंगे?

मैंने नीचे सीएसएस का इस्तेमाल एफएफ, सफारी, क्रोम में ड्रॉप डाउन ऐरो को छिपाने के लिए किया और मेरी अपनी छवि को अनुकूलित करने के लिए जोड़ा।

select { -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; } 

IE10 के लिए, मैं छद्म तत्व का इस्तेमाल किया

 select::-ms-expand{ display:none; } 

मुझे नहीं पता कि आईई 9 और आईई 8 के लिए यह कैसे लागू किया जाए। क्या कोई मुझे बता सकता है कि आईई 8 और आईई 9 में ड्रॉप डाउन ऐरो कैसे छिपाएगा।

वेब के समाधान से एकत्रित समाधान "IE8 और IE9 में ड्रॉप डाउन ऐरो कैसे छिपाएंगे?"

आपने IE8 और IE9 के समाधान के लिए कहा है

आइए IE8 से शुरू करें संक्षिप्त जवाब: यह संभव नहीं है। जिस तरह से IE8 और पहले से चुनें बॉक्स चुनते हैं, आप बस ड्रॉप-डाउन तीर को छिपा नहीं सकते हैं। पुराने नियंत्रण में बॉक्स नियंत्रण चुनें शैली के लिए असंभव है, और हमेशा किसी भी अन्य सामग्री के ऊपर स्थित दिखाई देता है

जावास्क्रिप्ट में पूरे चयन बॉक्स नियंत्रण को फिर से लिखने के अलावा, इसका कोई हल नहीं है।

अब आईई 9 आप ड्रॉप-एरो छुपा सकते हैं यह एक मानक बात नहीं है, लेकिन आप इसे हैक कर सकते हैं।

आपको अपने चयन बॉक्स के आस-पास एक आवरण तत्व (जैसे <div> ) से शुरू करना होगा फिर आप इसे एक के साथ शैली कर सकते हैं :before चयनकर्ता से :before ड्रॉप-एरो के ऊपर एक अतिरिक्त बिट सामग्री को स्थानांतरित करने के लिए, इसे प्रभावी रूप से छिपाते हुए

यहां सीएसएस है:

 div { position:relative; display:inline-block; z-index:0 } div select { z-index:1; } div:before { display:block; position:absolute; content:''; right:0px; top:0px; height:1em; width:1em; margin:2px; background:red; z-index:5; } 

… और जेएसएफडल्ड के लिए इसे देखने के लिए यहां देखें

ध्यान दें, मैंने यह स्पष्ट करने के लिए ओवरले रंग के रूप में red उपयोग किया है जो हो रहा है। स्पष्ट रूप से सामान्य उपयोग में आप सफेद उपयोग करना चाहते हैं, इसलिए यह खड़े नहीं हो रहा है

आप यह भी ध्यान देंगे कि जैसा मैंने ऊपर बताया था, यह IE8 में काम नहीं करता है।

जाहिर है, यह IE10 और अन्य ब्राउज़रों के लिए "उचित" समाधान के समान नहीं है, जो वास्तव में तीर को निकालते हैं; हम यहाँ जो कर रहे हैं वह सब छिपा रहा है और इसका मतलब है कि हम एक चुनिंदा बॉक्स के अंत में एक कष्टप्रद सफेद पैच के साथ समाप्त होते हैं जहां तीर का इस्तेमाल होता था।

हम इसे हल करने के लिए और स्टाइल कर सकते हैं: उदाहरण के लिए यदि हम कंटेनर तत्व को एक निश्चित चौड़ाई और overflow:hidden बनाते हैं overflow:hidden , हम सफेद पैच से छुटकारा पा सकते हैं, लेकिन फिर हमारे चयन बॉक्स की सीमाओं को तोड़ा जा रहा है, इसलिए हमें आगे स्टाइल फिक्स करना है; यह सब कुछ गंदा हो सकता है ज़ाहिर है, यह विकल्प केवल तभी काम करता है यदि चयन बॉक्स ही ज्ञात निश्चित चौड़ाई है।

तो आपके पास यह है: IE9 में ऐसा करने के लिए विकल्प हैं। वे बहुत हालांकि नहीं हैं, और स्पष्ट रूप से प्रयास के लायक नहीं हो सकता है। लेकिन अगर आप बेताब हो, तो आप ऐसा कर सकते हैं।

ओह, और इस सीएसएस कोड को विशिष्ट बनाने के लिए मत भूलो, यह केवल IE9 पर चलता है, अन्यथा यह अन्य ब्राउज़रों पर समस्याएं पैदा करेगा।

आप आईई 9 के लिए शुद्ध सीएसएस में तीर को नहीं हटा सकते हैं। यही कारण है कि उन्होंने आईई 10 के लिए ::-ms-expand किया।

हालांकि, आप ऐसा कुछ कर सकते हैं जेएसफ़िल्ड यहाँ

इस उदाहरण में, आप select पर एक निश्चित width निर्धारित करते select , और एक कम width और overflow:hidden साथ एक div को लपेटते हैं overflow:hidden ड्रॉपडाउन को ढंकने / छिपाने के लिए छुपा हुआ। इसका पूर्ण समर्थन है यह अनिवार्य रूप से सभी ब्राउज़रों में तीर को छुपता है।

सीएसएस

 div { width: 80px; overflow: hidden; border: 1px solid black; } select { width: 100px; border: 0px; } 

IE के पुराने संस्करणों में इसे पूरा करने का एकमात्र तरीका है <select> थोड़ा सा कंटेनर में और overflow: hidden; सेट करें overflow: hidden; यह दाहिनी ओर तीर छिपाएगा लेकिन फिर भी आप उस पर क्लिक करके ड्रॉप-डाउन खोलने की अनुमति देते हैं। यह गड़बड़ है, लेकिन आप जो चाहते हैं वह पूरा करने का एकमात्र तरीका है।

अतीत में ये तत्व शैलीबद्ध नहीं थे क्योंकि उन्हें ऑपरेटिंग सिस्टम का हिस्सा माना जाता था। ऐसा प्रतीत होता है कि यह अब एक मुद्दा कम हो रहा है कि आपके जैसा छद्म तत्वों का उल्लेख किया गया है, वे उपलब्ध हैं।

हर उपयोग के मामले के बारे में निश्चित नहीं है, लेकिन मेरे मामले में माता-पिता के लिए निर्धारित चौड़ाई एक्स ऊंचाई बीजी तस्वीर के साथ, यह आईई और एफएफ के लिए भी काम करता है:

एचटीएमएल

 <div id="parent"> <select> ... </select> </div> 

सीएसएस

 #parent{ ... overflow: hidden; width:100px; // for example } #parent select{ ... width:120px; } 

jsfiddle

IE9 के लिए एक और बुरा लेकिन कार्यात्मक समाधान: डी

पूर्वावलोकन

// सीएसएस

 div { position:relative; display:inline-block; border:solid black 1px; z-index:0 } div select { z-index:1; border:none; width:200px; } div:before { display:block; position:absolute; content:url('http://img.hiwab.com/html/arrow.png'); right:-2px; top:-1px; padding-left:2px; height:18px; width:15px; margin:2px; background:white; z-index:445; border: 0; } 

आप सभी की जरूरत है इस IE9 मीडिया क्वेरी हैक के साथ इस कोड encapsulate है

 /* IE9 */ @media screen and (min-width:0\0) { } /* IE9 */ 

jsFiddle