सीएसएस कस्टम ड्रॉपडाउन चुनें जो सभी ब्राउज़रों में काम करता है आईई 7 + एफएफ वेबकिट

Question

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

http://jsfiddle.net/DJDf8/1/

सीएसएस:

#menulist { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    height:32px; 
    border:1px solid #000; 
    width:260px; 
    text-indent: 8px; 
} 
.arrow{ 

    cursor:pointer; 
    height:32px; 
    width:24px; 
    position:absolute; 
    right:0px; 
    background-color:#c8c8c8; 
    background:url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0; 
} 

HTML:

<span style="position:relative;" > 
      <span class="arrow" ></span> 
      <select id="menulist"> 
       <option value="one">One</option> 
       <option value="two">Two</option> 
      </select>  
     </span> 

Answer 1

आप जाँच कर सकते हैं Select2 प्लगइन:

http://ivaynberg.github.io/select2/

Select2 चयन बॉक्स के लिए एक jQuery आधारित प्रतिस्थापन है। यह खोज, दूरस्थ डेटा सेट, और परिणामों की अनंत स्क्रॉलिंग का समर्थन करता है।

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

Answer 2

pointer-events इस समस्या के लिए उपयोगी हो सकता है क्योंकि आप तीर बटन पर एक div डाल सकते हैं, लेकिन फिर भी तीर बटन पर क्लिक करने में सक्षम होंगे।

pointer-events सीएसएस एक div के माध्यम से क्लिक करना संभव बनाता है।

यह दृष्टिकोण IE11 से पुराने IE संस्करणों के लिए काम नहीं करेगा, हालांकि। यदि आप तीर बटन के शीर्ष पर रखे तत्व को SVG तत्व पर रखते हैं, तो आप IE8 और IE9 में कुछ काम कर सकते हैं, लेकिन बटन को स्टाइल करने के लिए यह अधिक जटिल होगा जैसे आप इस तरह आगे बढ़ना चाहते हैं।

यहाँ एक जे एस बेला उदाहरण: जोड़ने के लिए http://jsfiddle.net/e7qnqzx6/2/

Answer 3

यह बहुत सरल है, तो आप सिर्फ चुनिंदा तत्व है और यह स्थान है जहाँ आप की जरूरत के लिए एक पृष्ठभूमि छवि को जोड़ने की आवश्यकता है, लेकिन भूल नहीं है:

-webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 

http://shouldiprefix.com/#appearance

माइक्रोसॉफ्ट एज और IE मोबाइल समर्थन इस संपत्ति बल्कि इंटरॉप कारणों के लिए -ms- से -webkit- उपसर्ग चौड़ाई के अनुसार

।

मैं सिर्फ इस बेला http://jsfiddle.net/drjorgepolanco/uxxvayqe/

Answer 4

बनाया प्रति लिंक के रूप में:। http://bavotasan.com/2011/style-select-box-using-only-css/ कि किया जाना चाहिए (वहाँ अतिरिक्त div रखो और चित्र को स्थान अतिरिक्त rework की बहुत देखते हैं इसके अलावा डिजाइन विकल्प विश्लेषण के रूप में टूट जाएगा होगा गलत चयन।

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

एचटीएमएल

<select class="dropdown" name="drop-down"> 
    <option value="select-option">Please select...</option> 
    <option value="Local-Community-Enquiry">Option 1</option> 
    <option value="Bag-Packing-in-Store">Option 2</option> 
</select> 

सीएसएस

select.dropdown { 
    margin: 0px; 
    margin-top: 12px; 
    height: 48px; 
    width: 100%; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #666666; 
    padding: 9px; 
    font-family: tescoregular; 
    font-size: 16px; 
    color: #666666; 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
    -moz-appearance: none; 
    appearance: none; 
    background: url('yoururl/dropdown.png') no-repeat 97% 50% #ffffff; 
    background-size: 11px 7px; 
} 

Answer 5

<select class="dropdownmenu" name="drop-down"> 
    <option class="dropdownmenu_list1" value="select-option">Choose ...</option> 
    <option class="dropdownmenu_list2" value="Topic 1">Option 1</option> 
    <option class="dropdownmenu_list3" value="Topic 2">Option 2</option> 
</select> 

यह फ़ायरफ़ॉक्स में सबसे अच्छा काम करता है। बहुत बुरा है कि क्रोम और सफारी इस आसान सीएसएस स्टाइल का समर्थन नहीं करते हैं।

Answer 6

मुझे भी इसी तरह की समस्या थी। फ़ायरफ़ॉक्स समर्थन के लिए

1) होती है विशेष सीएसएस हैंडलिंग का चयन करें तत्व के पेरेंट के लिए, कृपया गौर: अंत में https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers

नोट एक ही समाधान मिल गया।

2) Down.png

सीएसएस कोड से down.png डाउनलोड

 /* For Firefox browser we need to style for SELECT element parent. */ 

     @-moz-document url-prefix() { 

      /* Please note this is the parent of "SELECT" element */ 

      .select-example { 
       background: url('https://techmeals.com/external/images/down.png'); 
       background-color: #FFFFFF; 
       border: 1px solid #9e9e9e; 
       background-size: auto 6px; 
       background-repeat: no-repeat; 
       background-position: 96% 13px; 
      } 
     } 

     /* IE specific styles */ 
     @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
     { 
       select.my-select-box { 
       padding: 0 0 0 5px; 
      } 
     } 

     /* IE specific styles */ 
     @supports (-ms-accelerator:true) { 
       select.my-select-box { 
       padding: 0 0 0 5px; 
      } 
     } 

     select.my-select-box { 
      outline: none; 
      background: #fff; 
      -moz-appearance: window; 
      -webkit-appearance: none; 
      border-radius: 0px; 
      text-overflow: ""; 
      background-image: url('https://techmeals.com/external/images/down.png'); 
      background-size: auto 6px; 
      background-repeat: no-repeat; 
      background-position: 96% 13px; 
      cursor: pointer; 
      height: 30px; 
      width: 100%; 
      border: 1px solid #9e9e9e; 
      padding: 0 15px 0 5px; 
      padding-right: 15px\9;  /* This will be apllied only to IE 7, IE 8 and IE 9 as */ 
      *padding-right: 15px;  /* This will be apllied only to IE 7 and below. */ 
      _padding-right: 15px;  /* This will be apllied only to IE 6 and below. */ 
     } 

एचटीएमएल कोड

<div class="select-example"> 
     <select class="my-select-box"> 
      <option value="1">First Option</option> 
      <option value="2">Second Option</option> 
      <option value="3">Third Option</option> 
      <option value="4">Fourth Option</option> 
     </select> 
    </div>