HTML , CSS , Dropdown Arrow , Select

Question

I have created fiddle here, which shows select and dropdown arrow.

My problem is that the arrow is created using CSS and positioned on top of select. however click on arrow doesn't open dropdown.

1. is there a way to use that css as background of select like we do when we use image arrow.
2. or is it possible to simulate the behavior on arrow click?

 .selectClass { -webkit-appearance: none; -webkit-border-radius: 0; -moz-appearance: none; border: none; width: 100px; background: #EEE; height: 30px; font-size: 20px; padding-left: 5px; } .dropDownArrow { position: relative; margin-left: 75px; margin-top: -20px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #555; } 

 <select class="selectClass"> <option>One</option> <option>Two</option> <option>Three</option> </select> <div class="dropDownArrow"></div> 

Answer 1

I would create a parent div around both elements with the background color, move the dropdown arrow behind the select header, make that header background transparent. That way you see the arrow but, are only clicking on the select element box on top:

 .dropDownArrow { position: absolute; left: 75px; top: 10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #555; } .selectClass { -webkit-appearance: none; -webkit-border-radius: 0; -moz-appearance: none; border: none; width: 100px; background: transparent; height: 30px; font-size: 20px; padding-left: 5px; position: absolute; } .dropdownWrapper { position:absolute; width: 100px; height: 30px; background: #ddd; } 

 <div class="dropdownWrapper"> <div class="dropDownArrow"></div> <select class="selectClass"> <option>One</option> <option>Two</option> <option>Three</option> </select> </div> 

Answer 2

By far the simplest solution here would be to ignore the mouse clicks on the arrow and let the clicks "go through" by using pointer-events: none; . That's the only needed change to your code, see it here:

 .selectClass { -webkit-appearance: none; -webkit-border-radius: 0; -moz-appearance: none; border: none; width: 100px; background: #EEE; height: 30px; font-size: 20px; padding-left: 5px; } .dropDownArrow { pointer-events: none; position: relative; margin-left: 75px; margin-top: -20px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #555; } 

 <select class="selectClass"> <option>One</option> <option>Two</option> <option>Three</option> </select> <div class="dropDownArrow"></div>