ड्रॉपडाउन सूची (चयन तत्व) से डिफ़ॉल्ट तीर आइकन कैसे निकालें?

Question

मैं एक HTML <select>तत्व से ड्रॉपडाउन तीर निकालना चाहता हूं । उदाहरण के लिए:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

ओपेरा, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर में इसे कैसे करें?

Comments

फ़ायरफ़ॉक्स में इसे छिपाने के लिए कुछ जवाब / हैक - stackoverflow.com/questions/5912791/…

— एंडीब

उपस्थिति; #slectType { -webkit-appearance: none; appearance: none /*menulist*/ महत्वपूर्ण; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;} ब्रूज़ [CH: -webkit, FF: -moz, IE: -ms, Oprea: -o];

— यश

आईई पर चुनिंदा तीर

— Muath

HTML छिपाने

— दमजान पाव्लिका

Answer 1

हैक या अतिप्रवाह की कोई आवश्यकता नहीं है। IE पर ड्रॉपडाउन तीर के लिए एक छद्म तत्व है:

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

Comments

क्योंकि सवाल यह था कि IE में ड्रॉपडाउन तीर को कैसे हटाया जाए। IE9 में यह कार्यक्षमता नहीं है, लेकिन IE10 में यह काम करता है। इसलिए जब तक आप विंडोज़ एक्सपी का उपयोग नहीं कर रहे हैं, आपको वैसे भी IE10 का उपयोग करना चाहिए। IE11 लगभग बाहर है। अन्य विकल्प वास्तविक ड्रॉपडाउन बटन को छिपाने और अपना खुद का बनाने के लिए एक बदसूरत सीएसएस हैक है।

— नृत्स

लिंक यहाँ एक बदसूरत हैक अतिप्रवाह छिपाने के लिए है

— nrutas

IE11 में काम करता है। ग्रेसियस!

— कॉनरोड्डी

फ़ायरफ़ॉक्स में यह काम नहीं किया। फ़ायरफ़ॉक्स के लिए नीचे वरुण राठौर के समाधान का उपयोग करें।

— लगभग प्रीटिट

यह केवल IE के लिए है। बेशक यह फ़ायरफ़ॉक्स में काम नहीं करेगा।

— नृत्स

Answer 2

पहले वर्णित समाधान क्रोम के साथ अच्छी तरह से काम करते हैं लेकिन फ़ायरफ़ॉक्स पर नहीं।

मुझे एक समाधान मिला जो क्रोम और फ़ायरफ़ॉक्स दोनों में अच्छा काम करता है (आईई पर नहीं)। अपने चयन के लिए CSS में निम्नलिखित विशेषताओं को जोड़ें और अपनी आवश्यकताओं के अनुरूप मार्जिन-टॉप को समायोजित करें।

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

उम्मीद है की यह मदद करेगा :)

Comments

इस ट्रिक ने फ़ायरफ़ॉक्स पर 31 वर्जन (मई 2014 में नाइटली बिल्ड में) के रूप में काम करना बंद कर दिया। देखते हैं कि इस बीच क्या किया जा सकता है। मैंने जो लिखा है, उसका पूरा लोअरडाउन है

— João Cunha

जोआओ कुन्हा की विधि की जाँच की और सफलतापूर्वक उपयोग किया। जब आप इसे चेक करते हैं, तो फ़ायरफ़ॉक्स में लिंक खोलना न भूलें!

— नोबिशप्रो

इसने मेरे लिए काम किया। मैं html से pdf जनरेट करने के लिए wkhtmltopdf के लिए इसका उपयोग करना चाहता था। धन्यवाद

— फैसल

Answer 3

चयन से ड्रॉप डाउन एरो को हटाने का सरल तरीका

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

Comments

मैंने अभी appearance: noneक्रोम और फ़ायरफ़ॉक्स क्वांटम (v59 और अप) के लिए उपयोग किया है। यानी अब वेंडर की जरूरत नहीं है ।

— CPHPython

@CPHPython इस टिप्पणी के अधिकांश ब्राउज़र अभी भी उन पर "उपसर्ग के साथ आंशिक समर्थन" टैग ...

— Dan

@CPHPython को काम करने के लिए उपसर्ग के लिए आपको अपनी परियोजना पर ऑटोप्रेफ़िक्सर स्थापित appearance: noneकरना होगा। अधिकांश ब्राउज़रों को अभी भी उपसर्गों की आवश्यकता है।

— डैनियल टोनन

@DanielTonon ओह, शायद मैं कुछ postcss पैकेज का उपयोग कर रहा था। मुझे ठीक से याद नहीं है, लेकिन मुझे लगता है कि मैंने टिप्पणी करने से पहले ब्राउज़र के निरीक्षक की जांच की।

— CPHPython

Answer 4

इसे इस्तेमाल करे :

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

जेएस बिन: http://jsbin.com/aniyu4/2/edit

यदि आप Internet Explorer का उपयोग करते हैं:

select {
    overflow:hidden;
    width: 120%;
}

या आप चुना का उपयोग कर सकते हैं: http://harvesthq.github.io/chosen/

Comments

क्या आपने IE और फ़ायरफ़ॉक्स में अपने JSBin का परीक्षण किया था ? मैं अभी भी दोनों में ड्रॉपडाउन एरो में देखा गया।

— मार्टिन स्मिथ

चोसेन के साथ जांचें, मुझे लगता है कि यह सबसे अच्छा विकल्प है।

— एपोकक

"यदि आप इंटरनेट एक्सप्लोरर का उपयोग करते हैं"? आपको आबादी के बड़े% पर विचार करने की आवश्यकता है जो IE का उपयोग करते हैं और उनके लिए परवाह किए बिना

— डैनी महोनी

हमारी साइट के उपयोगकर्ता आँकड़े इस प्रकार हैं: 5.21% IE या 2.37% एज

— एनयू एवरेस्ट

"यदि आप IE का उपयोग करते हैं" तो सही होगा, यह कहना बेहतर होगा कि "यदि आपको IE का समर्थन करने की आवश्यकता है" लेकिन इस दिन और उम्र में, आपकी तकनीक को आपके दर्शकों के लिए ठीक से लक्षित किया जाना चाहिए, यदि आप एक वेब चला रहे हैं डेवलपर की लक्षित वेबसाइट तब मुझे संदेह है कि आपको IE के किसी भी संस्करण का समर्थन करने की आवश्यकता होगी।

— ब्रैंडिटो

Answer 5

इसे इस्तेमाल करे:

HTML:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

सीएसएस:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

Answer 6

यह मेरे लिए काम करता है की कोशिश करो,

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

आप छिपा नहीं सकते हैं लेकिन छिपे हुए अतिप्रवाह का उपयोग करके आप वास्तव में इसे गायब कर सकते हैं।

Answer 7

बस धागा पूरा करना चाहता था। बहुत स्पष्ट होने के लिए यह IE9 में काम नहीं करता है, हालांकि हम इसे छोटी सीएसएस चाल से कर सकते हैं।

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

Answer 8

जैसा कि मैंने उत्तर दिया IE पर निकालें चयन तीर में उत्तर दिया

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

.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;
}

Answer 9

select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

Answer 10

आप इसे पूरी तरह कार्यात्मक क्रॉस ब्राउज़र समर्थन के साथ नहीं कर सकते।

इसके दाईं ओर अपनी पसंद के वांछित ड्रॉप-डाउन आइकन को 50 पिक्सेल मान लें और तैरने की कोशिश करें

अब उस div के भीतर, 55 पिक्सेल की चौड़ाई के साथ चुनिंदा टैग जोड़ सकते हैं (कंटेनर की चौड़ाई से कुछ अधिक)

मुझे लगता है कि आपको वही मिलेगा जो आप चाहते हैं।

यदि आप दाईं ओर कोई ड्रॉप आइकॉन नहीं चाहते हैं, तो दाईं ओर छवि को तैरने के अलावा सभी चरणों को करें। सेट आउटलाइन: 0 चयनित टैग के लिए फ़ोकस पर। बस

Comments

मुझे इन संकेतों से कोई मदद नहीं मिल सकती है। क्या कोई यहां पर्याप्त कोड दे सकता है? धन्यवाद।

— user2301515

Answer 11

वहाँ DropKick.js नामक एक पुस्तकालय है जो HTML / CSS के साथ सामान्य चयन ड्रॉपडाउन की जगह लेता है ताकि आप जावास्क्रिप्ट के साथ उन्हें पूरी तरह से स्टाइल और नियंत्रित कर सकें। http://dropkickjs.com/

Answer 12

सभी ब्राउज़रों और सभी संस्करणों के लिए काम करता है:

जे एस

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

एचटीएमएल

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>