स्वनिर्धारित चयन लटकती तीर नहीं क्लिक करने योग्य

Question

मैं अपने चयन ड्रॉप डाउन तीर अनुकूलित करने के लिए निम्नलिखित कोड का उपयोग कर रहा:

एचटीएमएल:

<span class="selectWrapper"> 
    <select id="rowselect" class="pageinfoselect input-mini"> 
     <option>...</option> 
    </select> 
</span> 

सीएसएस:

span.selectWrapper { 
    position: relative; 
    display: inline-block; 
      width:65px; 
} 

span.selectWrapper select { 
    display: inline-block; 
    padding: 4px 3px 3px 5px; 
    margin: 0; 
    font: inherit; 
    outline:none; /* remove focus ring from Webkit */ 
    line-height: 1.2; 
    background: #f5f5f5; 
    height:30px; 
    color:#666666; 
    border:1px solid #dddddd; 
} 




/* Select arrow styling */ 
span.selectWrapper:after { 
    content: url("../images/arrow_down.png"); 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    line-height: 30px; 
    padding: 0 7px; 
    background: #f5f5f5; 
    color: white; 
    border:1px solid #dddddd; 
    border-left:0px; 
} 

यह ठीक काम करता है और डिफ़ॉल्ट ड्रॉपडाउन तीर को प्रतिस्थापित करता है लेकिन समस्या यह है कि तीर छवि क्लिक करने योग्य नहीं है। अगर मैं सलेक्ट बॉक्स पर क्लिक करें यह खोलता है, लेकिन मैं इसे खोलने के लिए जब मैं क्लिक करें तीर छवि के साथ-साथ

Answer 1

निम्नलिखित नियम जोड़ें

pointer-events:none; 

संपादित हैं:

ऐसा लगता है हालांकि आईई अभी तक इस संपत्ति का समर्थन नहीं करता है (हालांकि caniuse के अनुसार - यह आईई 11 में समर्थित होगा)

लेकिन यदि आप अभी भी इस विधि को चाहते हैं तो आप आधुनिकता या सशर्त टिप्पणियों का उपयोग कर सकते हैं (के लिए आईई < 10) और this css hack (आईई 10 के लिए) आईई को मानक में निर्मित मानक पर वापस लाने के लिए।

/*target Internet Explorer 9 and Internet Explorer 10:*/ 
@media screen and (min-width:0\0) { 
    span.selectWrapper:after 
    { 
     display:none; 
    } 
} 

वहाँ लेकिन इस के लिए एक समाधान (और यह भी एक अलग समाधान) है, जो मैं my answer here में उल्लेख - जो भी this FIDDLE