html - फ़ायरफ़ॉक्स में किसी चयनित तत्व से तीर को कैसे हटाएं




css firefox (20)

महत्वपूर्ण अद्यतन:

फ़ायरफ़ॉक्स वी 35 के रूप में उपस्थिति संपत्ति अब काम करता है !!

V35 पर फ़ायरफ़ॉक्स के आधिकारिक रिलीज नोट्स से :

एक combobox पर किसी none मूल्य के साथ -moz-appearance का उपयोग अब ड्रॉपडाउन बटन (बग 649849) को हटा दें।

तो अब डिफ़ॉल्ट तीर को छिपाने के लिए - यह हमारे चुनिंदा तत्व पर निम्नलिखित नियम जोड़ने जैसा आसान है:

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

DEMO

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

मैं CSS3 का उपयोग कर एक select तत्व शैली बनाने की कोशिश कर रहा हूँ। मुझे वेबकिट (क्रोम / सफारी) में जो परिणाम चाहिए वो मिल रहा है, लेकिन फ़ायरफ़ॉक्स अच्छी तरह से खेल नहीं रहा है (मैं आईई के साथ भी परेशान नहीं हूं)। मैं CSS3 appearance संपत्ति का उपयोग कर रहा हूं, लेकिन किसी कारण से मैं फ़ायरफ़ॉक्स से ड्रॉप-डाउन आइकन को हिला नहीं सकता।

मैं जो कर रहा हूं उसका एक उदाहरण यहां दिया गया है: http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

जैसा कि आप देख सकते हैं, मैं कुछ भी कल्पना की कोशिश नहीं कर रहा हूं। मैं बस डिफ़ॉल्ट शैलियों को हटाना चाहता हूं और अपने ड्रॉप-डाउन तीर में जोड़ना चाहता हूं। जैसे मैंने कहा, वेबकिट में बढ़िया, फ़ायरफ़ॉक्स में बहुत अच्छा नहीं है। जाहिर है, -moz-appearance: none ड्रॉप-डाउन आइटम से छुटकारा -moz-appearance: none पाता है।

कोई विचार? नहीं, जावास्क्रिप्ट एक विकल्प नहीं है


@ JoãoCunha द्वारा उत्तर पर निर्माण, एक सीएसएस शैली जो एक ब्राउज़र के लिए उपयोगी है

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

आप बॉक्स की चौड़ाई बढ़ा सकते हैं और तीर को तीर के बाईं ओर ले जा सकते हैं। यह आपको एक खाली सफेद div के साथ तीर को कवर करने की अनुमति देता है।

एक नज़र डालें: http://jsbin.com/aniyu4/86/edit


इस तरह से प्रयास करें:

-webkit-appearance: button;
-moz-appearance: button;

फिर, आप एक अलग छवि का उपयोग पृष्ठभूमि के रूप में कर सकते हैं और इसे स्थानांतरित कर सकते हैं:

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

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

text-indent:10px;

यदि आपके पास चयन करने के लिए एक चौड़ाई निर्धारित है, तो यह संपत्ति चयनित क्षेत्र के नीचे डिफ़ॉल्ट ड्रॉपबॉक्स बटन दबाएगी।

इससे मेरा काम बनता है! ;)


क्या आप एचटीएमएल में मामूली बदलाव स्वीकार करेंगे?

चयन टैग युक्त एक div टैग डालने की तरह कुछ।

जरा देखो तो।


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

यह उस संस्करण के बाद से हल किया गया एक bugzilla.mozilla.org/show_bug.cgi?id=649849 था।


ठीक है, मुझे पता है कि यह सवाल पुराना है, लेकिन ट्रैक के नीचे 2 साल और मोज़िला ने कुछ भी नहीं किया है।

मैं एक साधारण कामकाज के साथ आया हूँ।

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

मान लें कि यह आपका चयन मेनू है:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

और मान लें कि सीएसएस वर्ग 'सीएसएस-चयन' है:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

फ़ायरफ़ॉक्स में, यह चुनिंदा मेनू के साथ प्रदर्शित होगा, इसके बाद बदसूरत फ़ायरफ़ॉक्स चयन तीर के बाद, आपके अच्छे कस्टम दिखने वाले एक के बाद। आदर्श नहीं।

अब यह फ़ायरफ़ॉक्स में जाने के लिए, कक्षा 'सीएसएस-चयन-मोज़' के साथ चारों ओर एक अवधि तत्व जोड़ें:

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

फिर मोज़िला के गंदे तीर को -मोज़-उपस्थिति के साथ छिपाने के लिए सीएसएस को ठीक करें: खिड़की और कस्टम तीर को अवधि के वर्ग 'सीएसएस-चयन-मोज़' में फेंक दें, लेकिन इसे केवल मोज़िला पर प्रदर्शित करने के लिए प्राप्त करें:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

3 घंटे पहले इस बग में केवल ठोकर खाने के लिए बहुत अच्छा (मैं वेब डिज़ाइन करने के लिए नया हूं और पूरी तरह आत्म-सिखाया जाता हूं)। हालांकि, इस समुदाय ने अप्रत्यक्ष रूप से मुझे बहुत मदद प्रदान की है, मैंने सोचा था कि यह लगभग कुछ समय था जब मैं कुछ वापस देता था।

मैंने केवल फ़ायरफ़ॉक्स (मैक) संस्करण 18 में परीक्षण किया है, और फिर 22 (अपडेट किए जाने के बाद)।

सभी प्रतिक्रिया का स्वागत है।


दुर्भाग्य से आपके लिए यह "कुछ कल्पना" है। आम तौर पर वेब लेखकों को फॉर्म तत्वों को फिर से डिजाइन करने के लिए नहीं रखा जाता है। कई ब्राउज़र जानबूझकर आपको स्टाइल नहीं देते हैं, ताकि उपयोगकर्ता को ओएस नियंत्रण देखने के लिए उपयोग किया जा सके।

ब्राउज़र और ऑपरेटिंग सिस्टम पर लगातार ऐसा करने का एकमात्र तरीका जावास्क्रिप्ट का उपयोग करना है और select तत्वों को "DHTML" वाले लोगों से प्रतिस्थापित करना है।

अनुच्छेद के बाद तीन jQuery आधारित प्लगइन्स दिखाते हैं जो आपको ऐसा करने की अनुमति देते हैं (यह थोड़ा पुराना है, लेकिन मुझे अभी कुछ भी नहीं मिला)

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1


मुझे पता है कि यह सवाल थोड़ा पुराना है, लेकिन चूंकि यह Google पर चलता है, और यह एक "नया" समाधान है:

appearance: normal मेरे लिए फ़ायरफ़ॉक्स में ठीक काम करने लगता है (संस्करण 5 अब)। लेकिन ओपेरा और आईई 8/9 में नहीं

ओपेरा और आईई 9 के लिए एक कामकाज के रूप में, मैंने एक नया श्वेत बॉक्स बनाने के लिए छद्म चयनकर्ता से :before और तीर के शीर्ष पर रखा था।

दुर्भाग्यवश, आईई 8 में यह काम नहीं करता है। बॉक्स सही ढंग से प्रस्तुत किया जाता है, लेकिन तीर बस वैसे भी चिपक जाता है ...: - /

select:before का उपयोग करना select:before ओपेरा में ठीक काम करने select:before , लेकिन आईई में नहीं। यदि मैं डेवलपर टूल को देखता हूं, तो मुझे लगता है कि यह नियमों को सही तरीके से पढ़ रहा है, और फिर उन्हें अनदेखा करता है (वे पार हो गए हैं)। तो मैं वास्तविक <select> आस-पास <span class="selectwrap"> उपयोग करता हूं।

select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

आपको इसे थोड़ा सा ट्विक करने की आवश्यकता हो सकती है, लेकिन यह मेरे लिए काम करता है!

अस्वीकरण: मैं इसका उपयोग फॉर्म के साथ वेबपृष्ठ की अच्छी दिखने वाली हार्डकॉपी प्राप्त करने के लिए कर रहा हूं, इसलिए मुझे दूसरा पृष्ठ बनाने की आवश्यकता नहीं है। मैं 1337 haxx0r नहीं हूं जो लाल स्क्रॉलबार चाहता है, <marquee> टैग, और whatnot :-) कृपया फॉर्म में अत्यधिक स्टाइल लागू करें जब तक आपके पास बहुत अच्छा कारण न हो।


मुझे लगता है कि मुझे एफएफ 31 के साथ समाधान मिला है !!!
यहां दो विकल्प दिए गए हैं जो इस लिंक पर अच्छी तरह से समझाए गए हैं:
http://www.currelis.com/hiding-select-arrow-firefox-30.html

मैंने विकल्प 1 का उपयोग किया: रॉड्रिगो-लुडगेरो ने ऑनलाइन डिमो सहित गिथब पर यह फ़िक्स पोस्ट किया। मैंने फ़ायरफ़ॉक्स 31.0 पर इस डेमो का परीक्षण किया और ऐसा लगता है कि यह सही तरीके से काम कर रहा है। क्रोम और आईई पर भी परीक्षण किया। एचटीएमएल कोड यहाँ है:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

और सीएसएस:

.custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; 
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

http://jsbin.com/pozomu/4/edit

यह मेरे लिए बहुत अच्छा काम करता है!


मेरे लिए काम करने वाली चाल 100% से अधिक चुनिंदा चौड़ाई बनाना और ओवरफ्लो लागू करना है: छुपा हुआ

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

एफएफ में ड्रॉपडाउन तीर को छिपाने के लिए अभी यह एकमात्र तरीका है।

Btw। यदि आप सुंदर ड्रॉपडाउन का उपयोग करना चाहते हैं Chosen


मैं चयन को स्टाइल कर रहा हूं बस इसे पसंद करता हूं

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

यह मेरे द्वारा परीक्षण किए गए सभी संस्करणों में एफएफ, सफारी और क्रोम में मेरे लिए काम करता है।

आईई में मैंने रखा:

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

आप यह भी कर सकते हैं: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {प्रदर्शन: कोई नहीं; }


यह काम करता है (फ़ायरफ़ॉक्स 23.0.1 पर परीक्षण):

select {
    -moz-appearance: radio-container;
}

यहां और वहां बहुत सी चर्चाएं हो रही हैं लेकिन मुझे इस समस्या के लिए कुछ उचित समाधान नहीं दिख रहा है। अंत में आईई और फ़ायरफ़ॉक्स पर इस हैक करने के लिए एक छोटा jquery + सीएसएस कोड लिखकर समाप्त हुआ।

Jquery का उपयोग कर एलिमेंट चौड़ाई (चयन तत्व) की गणना करें। चयन तत्व के चारों ओर एक रैपर जोड़ें और इस तत्व के लिए अतिप्रवाह छिपा रखें। सुनिश्चित करें कि इस रैपर की चौड़ाई एपॉक्स है। चयन तत्व के रूप में 25px कम। यह आसानी से Jquery के साथ किया जा सकता है। तो अब हमारा आइकन चला गया है ..! और यह SELECT तत्व पर हमारे छवि आइकन जोड़ने का समय है ... !!! पृष्ठभूमि जोड़ने के लिए बस कुछ सरल रेखाएं जोड़ें और आप सब खत्म हो गए हैं .. !! बाहरी आवरण के लिए छुपा ओवरफ्लो का उपयोग सुनिश्चित करें,

यहां कोड का एक नमूना है जो ड्रूपल के लिए किया गया था। हालांकि ड्रूपल विशिष्ट कोड की कुछ पंक्तियों को हटाकर दूसरों के लिए भी इस्तेमाल किया जा सकता है।

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);
/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

समाधान सभी ब्राउज़रों आईई, क्रोम और फ़ायरफ़ॉक्स पर काम करता है सीएसएस का उपयोग कर निश्चित चौड़ाई हैक जोड़ने की कोई ज़रूरत नहीं है। यह सभी JQuery का उपयोग गतिशील रूप से संभाला जा रहा है।

अधिक वर्णित: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css


हमें ऐसा करने का एक सरल और सभ्य तरीका मिला है। यह क्रॉस-ब्राउजर है, अपमानजनक है, और फॉर्म पोस्ट तोड़ नहीं देता है। पहले चयन बॉक्स की opacity 0 सेट करें।

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

ऐसा इसलिए है कि आप अभी भी उस पर क्लिक कर सकते हैं

फिर चयन बॉक्स के समान आयामों के साथ div बनाओ। Div को पृष्ठभूमि के रूप में चयन बॉक्स के नीचे रखना चाहिए। इसे प्राप्त करने के लिए { position: absolute } और z-index का उपयोग करें।

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

जावा के आंतरिक HTML को जावास्क्रिप्ट के साथ अपडेट करें। JQuery के साथ Easypeasy:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

बस! बस चयन बॉक्स के बजाय अपने div शैली। मैंने उपर्युक्त कोड का परीक्षण नहीं किया है, इसलिए आपको शायद इसे ट्विक करने की आवश्यकता होगी। लेकिन उम्मीद है कि आप समझ लेंगे।

मुझे लगता है कि यह समाधान धड़कता है {-webkit-appearance: none;} । सबसे ज्यादा ब्राउज़रों को फॉर्म तत्वों के साथ बातचीत करने के लिए क्या करना चाहिए, लेकिन निश्चित रूप से पृष्ठ पर उनके डिजाइन को तोड़ने के तरीके पर प्रदर्शित नहीं किया गया है।


हैकटी हैक ... एक समाधान जो मैंने परीक्षण किए गए हर ब्राउज़र में काम करता है (सफारी, फ़ायरफ़ॉक्स, क्रोम)। कोई आईई आसपास नहीं है, तो यह अच्छा होगा अगर आप परीक्षण और टिप्पणी कर सकते हैं:

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

सीआरएल, यूआरएल-एन्कोडेड छवि के साथ:

.wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

http://codepen.io/anon/pen/myPEBy

मैं बदसूरत तीर को कवर करने के लिए: तत्व के बाद उपयोग कर रहा हूँ। Since select doesn't support :after, i need a wrapper to work with. Now, if you would click on the arrow, the dropdown won't register it ... unless your browser supports pointer-events: none , which everyone except IE10- does: http://caniuse.com/#feat=pointer-events

So for me it's perfect - a nice, clean, low-headache solution, at least compared to all the other options which include javascript.

tl;dr:

If IE10 (or lower) Users click the arrow, it won't work. Works good enough for me...


pointer-events संपत्ति का उपयोग करें।

यहां विचार मूल ड्रॉप डाउन तीर (हमारे कस्टम एक बनाने के लिए) पर एक तत्व को ओवरले करना है और फिर उस पर सूचक घटनाओं को अस्वीकार करना है। [ इस पोस्ट को देखें]

इस विधि का उपयोग कर एक काम कर रहे FIDDLE

इसके अलावा, इस SO उत्तर में मैंने इस और अन्य तरीकों से अधिक विस्तार से चर्चा की।


अद्यतन: यह फ़ायरफ़ॉक्स v35 में तय किया गया था। विवरण के लिए पूरी जानकारी देखें।

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

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

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

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

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


The other answers didn't seem to work for me, but I found this hack. This worked for me (July 2014)

select {
-moz-appearance: textfield !important;
    }

In my case, I also had a woocommerce input field so I used this

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

इनपुट के बजाए शो का चयन करने के लिए मेरा उत्तर अपडेट किया गया


try this css

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

Its working







css3