Customized select dropdown arrow not clickable

Question

I'm using the following code to customize my select dropdown arrow: HTML: ``` ``` CSS: ``` 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; } ``` This works fine and replaces the default dropdown arrow but the problem is that the arrow image is not clickable. If I click on the select box it opens but I want it to open when I click the a…

Accepted Answer

Add the following rule

```
pointer-events:none;
```

EDIT:

It should be noted though that IE doesn't yet support this property (Although according to caniuse - It will be supported in IE11)

BUT, If you still want to this method you can use Modernizer or conditional comments (For IE < 10) and this css hack (for IE10) to make IE revert to the standard built in arrow.

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

There is however a workaround (and also a different solution) for this, which I mention in my answer here - which also contains this Codepen

Customized select dropdown arrow not clickable

Solution

Problem

Related problems