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

Question

मैं selectCSS3 का उपयोग करके एक तत्व को स्टाइल करने की कोशिश कर रहा हूं । मुझे वेबकीट (क्रोम / सफारी) में मनचाहे परिणाम मिल रहे हैं, लेकिन फ़ायरफ़ॉक्स अच्छी तरह से नहीं खेल रहा है (मैं IE के साथ भी परेशान नहीं कर रहा हूं)। मैं 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;
}

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

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

Comments

इस बारे में एक बग रिपोर्ट है: Bugzilla.mozilla.org/show_bug.cgi?id=649849

— sneilan

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

— Stephenmurdoch 9

आपको यह ब्लॉग पोस्ट उपयोगी लग सकता है: red-team-design.com/making-html-dropdowns-not-suck

— Rui Marques

ऐसा लगता है कि उन्होंने -moz-appearanceCSS3 की संपत्ति जोड़ी है , मैं उपयोग कर रहा हूं -moz-appearance: none;और यह संस्करण 35.0.1 में काम करता हुआ प्रतीत होता है।

— टोनी एम।

कंटेनर से चुनिंदा तत्व को व्यापक बनाने के लिए एक साधारण फिक्स होगा। और मोज़िला url- उपसर्ग लपेटें ताकि विकल्प केवल फ़ायरफ़ॉक्स में व्यापक हों। @-moz-document url-prefix() { select { width: 105%; overflow: hidden; } }

— ल्यूक फेमूर

Answer 1

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

मैं एक साधारण वर्कअराउंड लेकर आया हूं।

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

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

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

और मान लें कि css वर्ग 'css-select' है:

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

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

अब इसे फ़ायरफ़ॉक्स में लाने के लिए, क्लास 'css-select-moz' के साथ एक स्पैन एलिमेंट जोड़ें।

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

फिर मोज़िला के गंदे तीर को -Moz-उपस्थिति: विंडो को छिपाने के लिए CSS को ठीक करें और कस्टम एरो को स्पैन की क्लास 'css-select-moz' में फेंक दें, लेकिन केवल इसे mozilla पर प्रदर्शित करने के लिए इसे इस तरह से प्राप्त करें:

.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 (मैंने अद्यतन करने के बाद) में परीक्षण किया है।

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

Comments

और 2 साल बाद, यह सबसे अच्छा जवाब है जो मेरे वांछित परिणाम को प्राप्त करने के लिए पोस्ट किया गया है। मैंने यहां कोड का JSBin डाला है: दूसरों के देखने के लिए jsbin.com/aniyu4/2440/edit , और केवल 1 मामूली सीएसएस अपडेट किया। दायां गद्दी के कारण एफएफ में चयन की तुलना में यह अवधि व्यापक थी, इसका मतलब था कि तीर को क्लिक करना ड्रॉपडाउन को सक्रिय नहीं करता था। इसके लिए समायोजित करने के लिए, मैंने चयन अवधि की चौड़ाई को वापस खींचने के लिए, चयन की चौड़ाई को ओवरलैप करने के लिए, चयन तत्व पर एक नकारात्मक सही मार्जिन रखा है।

— रसेलवेलि

ओह बेशक! बहुत बहुत धन्यवाद, रसेल। वास्तव में खुशी हुई इससे मदद मिली।

— जॉर्डन यंग

विंडोज में एफएफ 23-24 पर मेरे लिए काम नहीं किया (मैंने टिप्पणी में jsbin की कोशिश की)। Tis वैकल्पिक हल का उपयोग कर समाप्त हो गया stackoverflow.com/questions/6787667/...

— एस्टेबन

यह अब एफएफ 30 पर काम नहीं करता है। कृपया आगे बढ़ें और मोज़िला की वेबसाइट पर एक टिकट जमा करें: Bugzilla.mozilla.org/show_bug.cgi?id=649849 । जितने अधिक लोग इसके बारे में शिकायत करते हैं, उतने ही बेहतर अवसर हमारे पास होते हैं।

— स्टेन

केवल मैक पर एफएफ 31 पर काम करता है।

— इरविन वेसल्स

Answer 2

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

---

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

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

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

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

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

Comments

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

— रसेलुलेस्टी

अच्छा कैच, @RussellUresti। लेकिन पूरे विचार को देखते हुए एक संशोधित तीर प्रदान करना हो सकता है, अंतरिक्ष वास्तव में खुद को उपयोगी साबित करता है। मैं इसके साथ एक सा खेला जाता है, और जोड़ने padding-right:10px;के लिए <select>होगा "पुश" बाईं ओर अब अदृश्य तीर। निचला रेखा: फ़ायरफ़ॉक्स ने तीर को छुपाया, क्रोम इसे हटाता है। मेरे लेखन को तदनुसार अद्यतन करेगा, इसके लिए धन्यवाद।

— जोहो कुन्हा

मैंने एक उत्तर के रूप में एक क्रॉसब्रोसर (आईई के पुराने संस्करणों में परीक्षण नहीं किया है) का एक सा जोड़ा ताकि आप अपना अपडेट कर सकें

— डेनियल टुलप

मेरे लिए सबसे अच्छा समाधान, जैसा -moz-appearence: windowकि पारदर्शी पृष्ठभूमि के साथ काम नहीं करता है (कम से कम फ़ायरफ़ॉक्स लाइनक्स में एक बदसूरत बीजी ड्रा करें)

— किक डिक

क्योंकि यह तीर को पूरी तरह से हटा देता है, जिसके परिणामस्वरूप <select> एक टेक्स्टबॉक्स जैसा दिखता है और यह बदसूरत है। तो आप एक पृष्ठभूमि छवि को वापस जोड़ सकते हैं ताकि यह एक ड्रॉपडाउन की तरह दिखाई दे: codepen.io/anon/pen/nvfCq

— thom_nic

Answer 3

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

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

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

Btw। यदि आप सुंदर ड्रॉपडाउन का उपयोग करना चाहते हैं, तो http://harvesthq.github.com/chosen/

Comments

मेरे लिए इसका कोई प्रभाव नहीं है। एफएफ 6.0.2

— चार्ली श्लेसेर

IE के लिए भी अच्छा समाधान। अपने समाधान में मैंने ओवरफ्लो करने के लिए युक्त div तत्व को सेट किया: छिपा हुआ और फिर चयन की चौड़ाई को बड़ा बना दिया। बहुत अच्छा काम करता है।

— माइक

@ शर्ली एस: ओवरफ्लो डालने की कोशिश करें: युक्त डिव पर छिपा हुआ। यह मेरे लिए

— taht के

जब आप ड्रॉपडाउन का विस्तार करते हैं, तो अतिप्रवाह: छिपा हुआ काम नहीं करता

— मार्क

मेरे लिए अच्छा काम करता है। यह ड्रॉपडाउन सूची को शीर्ष बिट की तुलना में थोड़ा व्यापक बनाता है लेकिन यह एक ऐसी कीमत है जिसका मैं भुगतान करने को तैयार हूं।

— जिमबली

Answer 4

महत्वपूर्ण अपडेट:

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

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

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

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

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

डेमो

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>

Answer 5

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

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

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

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

फिर चयन बॉक्स के समान आयामों के साथ 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>

जावास्क्रिप्ट के साथ div के भीतर HTML अद्यतन करें। आसान jQuery के साथ:

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

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

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

Comments

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

— रसेलवेलि

Answer 6

इस तरह आजमाएं:

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

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

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

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

text-indent:10px;

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

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

Answer 7

एक पूर्ण समाधान नहीं है, जबकि मैंने पाया है कि ...

-moz-appearance: window;

… कुछ हद तक काम करता है। आप पृष्ठभूमि (-color या -image) को बदल नहीं सकते हैं, लेकिन तत्व को रंग के साथ अदृश्य रूप से प्रदान किया जा सकता है: पारदर्शी। सही नहीं है, लेकिन यह एक शुरुआत है और आपको सिस्टम स्तर के तत्व को एक जेएस के साथ बदलने की आवश्यकता नहीं है।

Comments

हाँ, मैंने देखा कि windowइसका प्रभाव था, दुर्भाग्य से, मुझे पृष्ठभूमि की छवि सेट करने की आवश्यकता थी। यह दुर्भाग्यपूर्ण है कि फ़ायरफ़ॉक्स में यह बहुत अच्छा नहीं है।

— रसेलउरेसी

यह दुर्भाग्यपूर्ण है कि आप तत्वों को बनाने के लिए एक पूर्ण रीसेट लागू नहीं कर सकते। आप हमेशा <select> के नीचे एक तत्व होने से पृष्ठभूमि को नकली कर सकते हैं, जो आदर्श नहीं है, निश्चित रूप से।

— स्टुअर्ट बैडमिंटन

यह मुद्रण के लिए सही है! बस के media="print"साथ एक सीएसएस ब्लॉक सेट करें select {-moz-appearance: window;}और एफएफ पर सभी चयनों के तीरों और पृष्ठभूमि को हटा देगा (अन्य ब्राउज़रों के लिए उपस्थिति या -webkit- उपस्थिति की कोशिश करें) ताकि वे सादे पाठ या शीर्षक की तरह दिखें

— फ्रांसेस्कोएम

Answer 8

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

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

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

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

Comments

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

— एंड्रयू स्टब्स जुब

सुझाव के लिए धन्यवाद! मेरे दोषों के लिए क्षमा करें!

— फेरोकैसेलेटिनो

अपने प्रश्न को संपादित करने के लिए धन्यवाद, हालांकि यह अभी भी वास्तव में इस सवाल का जवाब नहीं देता है । कृपया उन लिंक के हिस्सों को कॉपी करें जो प्रश्नकर्ता की मदद करेंगे जैसे कि वे आपकी समस्या को हल करने में सक्षम होंगे बस आपका उत्तर पढ़ेंगे।

— एंड्रयू स्टब्स जुब

Answer 9

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

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

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

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

Comments

मैं असहमत हूं कि यह कुछ फैंसी है, हालांकि यह ऐसा कुछ है जो प्रयोगात्मक है। appearanceसंपत्ति का पूरा बिंदु डेवलपर्स को फॉर्म तत्वों की उपस्थिति पर नियंत्रण देना है, क्योंकि इसके लिए जावास्क्रिप्ट का उपयोग करना एक भयानक समाधान है। ब्राउज़र को यह निर्णय नहीं लेना चाहिए कि पृष्ठ में कुछ भी कैसे दिखता है - यह एक यूएक्स निर्णय है, ब्राउज़र विक्रेता का निर्णय नहीं। दुर्भाग्य से, यह अभी तक अच्छी तरह से समर्थित नहीं है। शायद एक और साल में।

— रसेलवेलि

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

— फ्रांसेस्कोएम

Answer 10

/* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}

Comments

+20 छद्म तत्व का उपयोग करने का सुझाव देने के लिए

— Zach Saucier

Answer 11

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

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

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

IE में मैंने डाला:

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

इसके अलावा आप कर सकते हैं: .yourclass :: - एमएस-विस्तार {प्रदर्शन: कोई नहीं; }। आपका। :: - एमएस-एक्सपन {प्रदर्शन: कोई नहीं; }

Answer 12

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

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

ओपेरा और IE9 के लिए एक वर्कअराउंड के रूप में, मैंने :beforeएक नया सफ़ेद बॉक्स बनाने के लिए स्यूडोसलेक्टर का उपयोग किया और उसे तीर के ऊपर रख दिया।

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

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

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>टैग और व्हाट्सएप चाहता है :-) कृपया अत्यधिक स्टाइलिंग को फॉर्म में लागू न करें जब तक कि आपके पास बहुत अच्छा कारण न हो।

Comments

-moz-appearance: normalFx 9 में एक वैध विकल्प नहीं लगता है, और -moz-appearance: none(जो मान्य है) डाउन एरो को नहीं हटाता है।

— रॉबिन विंसलो

आपका ओवरलैपिंग स्पैन समाधान IE और FF में काम करता है लेकिन क्रोम में काम नहीं करता है।

— वल्कन रैन

: पहले और: छद्म तत्व आंतरिक तत्वों को स्वीकार करने वाले तत्वों पर ही काम करते हैं। यह चयन का मामला नहीं है, न ही इनपुट, और न ही फाइलअपलोडर, आदि। वे डिव, लिंक, पैराग्राफ आदि के लिए महान हैं। इसका कारण यह है कि वे सामग्री को एलिमेंट से पहले / बाद में नहीं बल्कि आईटीएएस से पहले जोड़ते हैं। सामग्री। और एक चयनित तत्व कुछ का समर्थन नहीं करता है <select> hi।

— जोहो कुन्हा

Answer 13

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

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

यहाँ एक काम कर रहा है बेला इस पद्धति का उपयोग।

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

Answer 14

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

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

Comments

मेरे लिए काम किया है, लेकिन मैं radio-containerएक चयनित वस्तु के लिए मूल्य पसंद नहीं था । एक उचित मूल्य प्राप्त करने के लिए ब्राउज़ -मोज़-उपस्थिति मोज़िला संदर्भ (मैंने इस्तेमाल किया menulist-textजो एफएफ 31 में चयन के तीर को छुपाता है)

— sglessard

Answer 15

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

Answer 16

करने के लिए इसके अलावा जोआओ कुन्हा का जवाब , इस समस्या अब है मोज़िला कार्य सूची पर और ver 35 के लिए लक्षित है।

उन इच्छुक लोगों के लिए, टोड पार्कर द्वारा एक वर्कअराउंड है, जो कुन्हा के ब्लॉग पर संदर्भित है, जो आज काम करता है:

http://jsfiddle.net/xvushd7x/

HTML:

<label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

सीएसएस:

/* Label styles: style as needed */
label {
  display:block;
  margin-top:2em;
  font-size: 0.9em;
  color:#777;
}

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font-size:16px;
  /* General select styles: change as needed */
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  background-image: url(http://filamentgroup.com/files/select-arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.custom-select:hover {
  border:1px solid #888;
}

/* Focus style */
.custom-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}

/* Set options to normal weight */
.custom-select option {
  font-weight:normal;
}

Answer 17

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

यह उस संस्करण के बाद से एक बग हल किया गया था ।

Answer 18

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

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

यहाँ एक नमूना कोड है जो Drupal के लिए किया गया था। हालाँकि इसका उपयोग कोड की कुछ पंक्तियों को हटाकर भी किया जा सकता है जो Drupal Specific है।

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

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

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

Answer 19

इस सीएसएस की कोशिश करो

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

यह काम कर रहा है

Answer 20

appearanceCSS3 से संपत्ति की अनुमति नहीं है noneमूल्य। W3C संदर्भ पर एक नज़र डालें । तो, आप जो करने की कोशिश कर रहे हैं वह वैध नहीं है (वास्तव में क्रोम को भी स्वीकार नहीं करना चाहिए)।

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

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

Comments

लेकिन noneएक ऐसा मूल्य है जो फ़ायरफ़ॉक्स को समर्थन देने का दावा करता है: developer.mozilla.org/en/CSS/-moz-appearance फार्म तत्वों को स्टाइल करते हुए, अतीत में, केवल जावास्क्रिप्ट के माध्यम से ही पूरा किया जा सकता है, appearanceसंपत्ति का पूरा बिंदु हटना है उसमें से। ब्राउज़र विक्रेताओं को डेवलपर्स के लिए UX निर्णय नहीं करना चाहिए। दुर्भाग्य से, ऐसा लगता है कि प्रभावी रूप से उपयोग करने के लिए यह अभी भी थोड़ा नया है।

— रसेलवेलि

@RussellUresti, इसलिए हालांकि विक्रेता से उपसर्ग का विवरण -mozस्वीकार करता है none(भले ही वह काम किया हो) इसका उपयोग करना सही नहीं होगा। फ़ायरफ़ॉक्स जैसे ब्राउज़र के बारे में और भी, जो हमेशा मानकों का पालन करके खुद पर गर्व करता है।

— एरिक पेट्रुकेली

Answer 21

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

एक नज़र है: http://jsbin.com/aniyu4/86/edit

Answer 22

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

कुछ ऐसा है जिसमें सेलेक्ट टैग वाला एक डिव टैग डालना है।

जरा देखो तो।

Answer 23

या, आप चयन को क्लिप कर सकते हैं। की तर्ज पर कुछ:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

यह तीर को छीनते हुए, चयन बॉक्स के दाईं ओर 30px क्लिप होना चाहिए। अब 170px बैकग्राउंड इमेज और वॉयला, स्टाइल सेलेक्ट करें

Answer 24

यह एक बहुत बड़ा हैक है, लेकिन -moz-appearance: menulist-textहो सकता है कि यह ट्रिक हो।

Comments

यह मेरे लिए चयनित तीर को हटाने के लिए प्रतीत होता है, लेकिन जैसा कि @dendini ने उल्लेख किया है, इसने तत्व पर अन्य सभी स्टाइल को भी हटा दिया है

— कोडस्टार

Answer 25

मैं एक ही मुद्दा रहा था। एफएफ और क्रोम पर काम करना आसान है, लेकिन IE (8+ पर हमें समर्थन करने की आवश्यकता है) चीजें जटिल हो जाती हैं। IE8 सहित "हर जगह मैंने कोशिश की" काम करने वाले कस्टम चुनिंदा तत्वों का सबसे आसान समाधान मुझे मिल सकता है, .customSelect () का उपयोग कर रहा है

Answer 26

मेरे लिए एक उपयोगी हैक करने के लिए (चयन) प्रदर्शन सेट करने के लिए है inline-flex। मेरे चयनित बटन के ठीक बाहर तीर को काटता है। जोड़े गए कोड के बिना।

• केवल एफएक्स के लिए। -webkit appearanceअभी भी Chrome के लिए आवश्यक है, आदि ...

Comments

कोई प्रभाव नहीं लगता है

— क्रिस निकोला

Answer 27

जॉर्डन यंग का जवाब सबसे अच्छा है। लेकिन अगर आप अपने HTML को बदलना या नहीं कर सकते हैं, तो आप क्रोम, सफारी, आदि को दिए गए कस्टम डाउन तीर को हटाने और फ़ायरफ़ॉक्स के डिफ़ॉल्ट तीर को छोड़ने पर विचार कर सकते हैं - लेकिन बिना दोहरे तीर के। आदर्श नहीं है, लेकिन एक अच्छा त्वरित सुधार जो किसी भी HTML को नहीं जोड़ता है और अन्य ब्राउज़रों में आपके कस्टम लुक से समझौता नहीं करता है।

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

सीएसएस:

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

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}

Answer 28

hackity hack ... एक समाधान जो मैंने परीक्षण किए गए प्रत्येक ब्राउज़र में काम करता है (सफारी, फ़ायरफ़ॉक्स, क्रोम)। किसी भी IE के चारों ओर झूठ नहीं है, इसलिए यदि आप परीक्षण और टिप्पणी कर सकते हैं तो यह अच्छा होगा:

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

CSS, url- एन्कोडेड छवि के साथ:

.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

मैं उपयोग कर रहा हूँ: बदसूरत तीर को कवर करने के लिए तत्व के बाद। चूंकि चयन का समर्थन नहीं करता है: के बाद, मुझे काम करने के लिए एक आवरण की आवश्यकता है। अब, यदि आप तीर पर क्लिक करेंगे, तो ड्रॉपडाउन इसे पंजीकृत नहीं करेगा ... जब तक कि आपका ब्राउज़र समर्थन नहीं करता है pointer-events: none, जिसे IE10- के अलावा हर कोई करता है: http://caniuse.com/#feat=pointer-events

तो मेरे लिए यह एकदम सही है - एक अच्छा, स्वच्छ, कम सिरदर्द वाला समाधान, कम से कम अन्य सभी विकल्पों की तुलना में जिसमें जावास्क्रिप्ट शामिल है।

tl; डॉ:

यदि IE10 (या कम) उपयोगकर्ता तीर पर क्लिक करते हैं, तो यह काम नहीं करेगा। मेरे लिए काफी अच्छा काम करता है ...

Answer 29

यदि आपको जेएस से कोई फ़िक्र नहीं है, तो मैंने एक छोटा jQuery प्लगइन लिखा है जो आपको ऐसा करने में मदद करता है। इसके साथ आपको विक्रेता उपसर्गों के बारे में चिंता करने की आवश्यकता नहीं है।

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

यहां फिडेल: जेएस फिडल

शर्त यह है कि आपको स्क्रैच से चयन करना होगा (इसका मतलब बैकग्राउंड और बॉर्डर सेट करना है), लेकिन आप शायद इसे वैसे भी करना चाहते हैं।

चूंकि फ़ंक्शन डिव के साथ मूल चयन को प्रतिस्थापित करता है, इसलिए आप अपने सीएसएस में चयनकर्ता पर सीधे किए गए किसी भी स्टाइल को खो देंगे। इसलिए सेलेक्ट एलिमेंट को क्लास दें और क्लास को स्टाइल करें।

अधिकांश आधुनिक ब्राउज़रों का समर्थन करता है, यदि आप पुराने ब्राउज़रों को लक्षित करना चाहते हैं, तो आप jQuery के पुराने संस्करण की कोशिश कर सकते हैं, लेकिन शायद फ़ंक्शन में () (परीक्षण नहीं किया गया) बाइंड के साथ बदलना होगा

Answer 30

अन्य जवाब मेरे लिए काम नहीं करते थे, लेकिन मुझे यह हैक मिला। यह मेरे लिए काम किया (जुलाई 2014)

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

मेरे मामले में, मेरे पास एक woocommerce इनपुट क्षेत्र भी था इसलिए मैंने इसका उपयोग किया

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

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

Comments

input.input-text? इसका चयन विकल्प और पूछे गए प्रश्न के साथ क्या करना है?

— डेन्डिनी