Ok, let me paint you a picture. You've added a drop down menu to your page, and tried your best to style it through the basic, but restrictive options available to you. 

You've also found out that to remove the default drop down icon would require you to use:

.class {
  -webkit-appearance: none;  }
}

But now you want to place your own icon in there instead. Now you can add a :before pseudo element to a Select element, the best you can do is place a new div around the select element, and give that a :before element.

Your issue now, is that when you click on the new pseudo element, it doesn't activate the drop down like it should. This is because it's not part of the select element, so overrides it.

What you need to do is turn the pointer-events off. Which will basically make the element transparent to mouse events. So you won't actually be forwarding on the click events, they'll just allow the click event to reach the select element which will produce the same effect.

.wrapper:before {
  pointer-events: none;
}

 

Demo

To see a demo of a customised drop down without the default selector, and a customised one instead, view our demo code at jsfiddle.net. The Pointer-event is currently commented out in this demo so you can see the issue, just uncomment this and run it again to see the fix.

Our demo uses FontAwesome to create the icon, which is easy to add to your project.