html ड्रॉपडाउन तीर को हटाने का चयन करें




css drop-down-menu (11)

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

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

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

यदि आप इंटरनेट एक्सप्लोरर का उपयोग करते हैं:

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

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

मैं एचटीएमएल में चयन से ड्रॉपडाउन तीर को हटाना चाहता हूं। उदाहरण के लिए

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

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

एक छवि भी है:


हैक या ओवरफ्लो की कोई ज़रूरत नहीं है ... आईई पर ड्रॉपडाउन तीर के लिए एक छद्म तत्व है ...

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

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

सरल और प्रभावी। यह काम करता हैं!!


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

50 पिक्सल का एक div लेने का प्रयास करें और इसके दाईं ओर अपनी पसंद के वांछित ड्रॉप-डाउन आइकन को फ़्लोट करें

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

मुझे लगता है कि आप जो चाहते हैं उसे प्राप्त करेंगे।

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


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

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>


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

<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>

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


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


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

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

.simple-control आपके सीएसएस वर्ग है

:disabled छद्म वर्ग :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;
}

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

जे एस

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>

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

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

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;

}







drop-down-menu