Dropdown doesn't open when adding pseudo elements in css

[MathRivest]

I wanted to add an arrow in css using :after. When I click the arrow, the dropdown doesn't open. Clicking anywhere else works as expected. Thanks

[deansimcox]

I'd say that your problem is that your psuedo element is above the transparent element. You can fix this by making sure that hat psuedo element has a lower z-index that the element.

[svinkle]

In case this helps anyone else, here's my solution for this:

1. Wrap the select in a new div:

   <div class="customSelectContainer">
     <select>
     ...
     </select>
   </div>
   

2. Then add these styles:

   .customSelectContainer {
     position: relative;
   }
   
   .customSelectContainer:before {
     content: "\25BE";
     height: 20px;
     line-height: 1;
     margin-top: -10px;
     position: absolute;
     right: 0;
     text-align: center;
     top: 50%;
     width: 40px;
     z-index: 2;
   }
   
   .customSelectContainer:after {
     background-color: #eee;
     border: #aaa solid 1px;
     bottom: 0;
     content: "";
     position: absolute;
     right: 0;
     top: 0;
     width: 38px;
     z-index: 1;
   }
   
   .hasCustomSelect {
     z-index: 3;
   }