IE पर चयन तीर निकालें

Question

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

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

IE9 पर देखें फिडेल । मुझे क्या जरूरत है99 में JSFIDDLE जवाब में तीर को हटा दें।

Comments

यह संभव नहीं हो सकता है। ब्राउज़र (विशेष रूप से IE) पारंपरिक रूप से अपने विजेट के विस्तारित स्टाइलिंग विकल्पों की पेशकश करने के लिए अनिच्छुक रहे हैं।

— पेका

आप ऐसा सिर्फ CSS से नहीं कर सकते हैं, लेकिन मेरा मानना ​​है कि स्टाइल के लिए JS लाइब्रेरी हैं जो ऐसा कर सकती हैं। गूगल को पता होना चाहिए।

— मार्क सिम्पसन

@ अलबर्टो इस सवाल का जवाब 2 साल पहले दे चुका है :) अगर आपको लगता है कि आपके पास इसका जवाब है तो आप इसे डाल सकते हैं

— मुथ

ड्रॉपडाउन तीर को हटाने

— Szabolcs Páll

Answer 1

IE9 में, @Spudley द्वारा सलाह के अनुसार विशुद्ध रूप से हैक के साथ यह संभव है । चूँकि आपने div की ऊँचाई और चौड़ाई को अनुकूलित किया है, इसलिए आपको div:beforeअपना मिलान करने के लिए css को बदलना होगा ।

मामले में अगर यह IE10 है तो css3 के नीचे उपयोग करना संभव है

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

हालाँकि, यदि आप jQuery प्लगइन में रुचि रखते हैं, तो प्रयास करें Chosen.jsया आप अपना स्वयं का js बना सकते हैं।

Comments

@ मोहथ हावरी मैंने आपको फिडेल संशोधित किया है, IE9 में इसे देखें। jsfiddle.net/kBWYd/6

— प्रवीण

@PraveenJeganathan Selectbox में एक बग भी है। जैसा कि हम ड्रॉपडाउन के सिर्फ दाएं कोने पर क्लिक करते हैं, यह काम नहीं कर रहा है। क्या हम इसके लिए कुछ कर सकते हैं?

— मंजीत सिंह

@ प्रवीण बात है, तो राइट साइड क्लिक करने योग्य नहीं है।

— टॉम रोजगारो

@ManjitSingh & Tom Roggero - यह बहुत हैकरी है लेकिन अगर आपको उस स्थान को क्लिक करने योग्य चाहिए तो आप उसके display: none;साथ बदल सकते हैं opacity: .01। यह देखना लगभग असंभव होगा लेकिन यह अभी भी क्लिक करने योग्य होगा।

— 15

@MarcRoussel इस आधार पर बेला इस तरह लिखा जा सकता है select:hover::-ms-expandछद्म तत्व के लिए मंडराना राज्य के रूप में उल्लेख किया गया है selector:state::pseudo। मैं IE के साथ अभी तक एक कोशिश के लायक परीक्षण नहीं कर सका :)

— प्रवीण

Answer 2

मेरा सुझाव है कि मेरा समाधान है कि आप इस GitHub रेपो में पा सकते हैं । यह IE8 और IE9 के लिए भी काम करता है जो एक कस्टम फॉन्ट से होता है जो आइकन फॉन्ट से आता है।

कस्टम क्रॉस ब्राउज़र ड्रॉप-डाउन की कार्रवाई के उदाहरण : क्रॉस-ब्राउज़र सुविधा को देखने के लिए अपने सभी ब्राउज़रों के साथ उन्हें जांचें।

वैसे भी, चलो आधुनिक ब्राउज़रों के साथ शुरू करते हैं और फिर हम पुराने लोगों के लिए समाधान देखेंगे।

क्रोम, फ़ायरफ़ॉक्स, ओपेरा, इंटरनेट एक्सप्लोरर 10+ के लिए ड्रॉप-डाउन एरो

इन ब्राउज़र के लिए, एक ही तीर के लिए ड्रॉप-डाउन के लिए समान पृष्ठभूमि छवि सेट करना आसान है ।

ऐसा करने के लिए, आपको selectटैग के लिए ब्राउज़र की डिफ़ॉल्ट शैली को रीसेट करना होगा और नए पृष्ठभूमि नियमों को सेट करना होगा (जैसे पहले सुझाव दिया गया है)।

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

appearanceनियम ब्राउज़रों डिफ़ॉल्ट लोगों पुनर्स्थापित करने के लिए कोई नहीं पर सेट कर रहे हैं, अगर आप प्रत्येक तीर के लिए एक ही पहलू करना चाहते हैं, तो आप उन्हें जगह में रखना चाहिए।

backgroundउदाहरण में नियम एसवीजी इनलाइन चित्र है कि विभिन्न तीर प्रतिनिधित्व के साथ स्थापित कर रहे हैं। वे कुछ मार्जिन को दाईं सीमा पर रखने के लिए बाएं से 98% तैनात हैं (आप अपनी इच्छानुसार स्थिति को आसानी से संशोधित कर सकते हैं)।

सही क्रॉस-ब्राउज़र व्यवहार को बनाए रखने के लिए, केवल दूसरा नियम जिसे छोड़ना पड़ता है, वह है outline। यह नियम तत्व को क्लिक करने पर (कुछ ब्राउज़रों में) दिखाई देने वाली डिफ़ॉल्ट सीमा को रीसेट करता है। जरूरत पड़ने पर अन्य सभी नियमों को आसानी से संशोधित किया जा सकता है।

आइकन फॉन्ट का उपयोग करके इंटरनेट एक्सप्लोरर 8 (IE8) और इंटरनेट एक्सप्लोरर 9 (IE9) के लिए ड्रॉप-डाउन एरो

यह कठिन हिस्सा है ... या शायद नहीं।

इन ब्राउज़रों के लिए डिफ़ॉल्ट तीर को छिपाने के लिए कोई मानक नियम नहीं है (जैसे select::-ms-expandIE10 + के लिए)। समाधान ड्रॉप-डाउन के उस भाग को छिपाने के लिए है जिसमें डिफ़ॉल्ट तीर है और तीर आइकन फ़ॉन्ट (या एक एसवीजी, यदि आप चाहें तो) सम्मिलित करें जो अन्य ब्राउज़रों में उपयोग किए जाने वाले एसवीजी के समान है ( selectअधिक के लिए CSS नियम देखें) इनलाइन एसवीजी का उपयोग करने के बारे में विवरण)।

बहुत पहला कदम एक वर्ग सेट करना है जो ब्राउज़र को पहचान सकता है: यही कारण है कि मैंने कोड की शुरुआत में सशर्त IE आईएफ का उपयोग किया है। इन आईएफ का इस्तेमाल htmlपुराने IE ब्राउज़र को पहचानने के लिए टैग के लिए विशिष्ट कक्षाएं संलग्न करने के लिए किया जाता है।

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

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

आसान शब्दों में, selectटैग को अनुकरण करने के लिए इस आवरण का उपयोग किया जाता है ।

ड्रॉप-डाउन की तरह काम करने के लिए, रैपर के पास एक बॉर्डर होना चाहिए, क्योंकि हम उस एक को छिपाते हैं जो बाहर से आता है select।

ध्यान दें कि हम selectसीमा का उपयोग नहीं कर सकते हैं क्योंकि हमें डिफ़ॉल्ट तीर को छिपाने के लिए इसे आवरण से 25% अधिक लंबा करना होगा। नतीजतन, इसकी सही सीमा दिखाई नहीं देनी चाहिए क्योंकि हम इस overflow: hiddenनियम को selectखुद पर लागू नियम से 25% अधिक छिपाते हैं ।

कस्टम तीर आइकन-फ़ॉन्ट को छद्म वर्ग में रखा गया है :beforeजहां नियम contentमें तीर के लिए संदर्भ होता है (इस मामले में यह एक सही कोष्ठक है)।

हम इस तीर को यथासंभव रखने के लिए एक पूर्ण स्थिति में रखते हैं (यदि आप विभिन्न आइकन फोंट का उपयोग करते हैं, तो याद रखें कि उन्हें शीर्ष और बाएं मानों और फ़ॉन्ट आकार बदलकर उन्हें व्यवस्थित रूप से समायोजित करना है)।

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

आप पृष्ठभूमि तीर या आइकन फ़ॉन्ट तीर को आसानी से बना और स्थानापन्न कर सकते हैं, हर एक के साथ जो आप बस इसे background-imageनियम में बदलना चाहते हैं या अपने आप से एक नया आइकन फ़ॉन्ट फ़ाइल बनाना चाहते हैं।

Answer 3

यदि आप वर्ग और छद्म वर्ग का उपयोग करना चाहते हैं:

.simple-control आपकी सीएसएस क्लास है

:disabled छद्म वर्ग है

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}