如何从自定义占位符触发 select 更改事件

Question

I have custom placeholder above select control. but the click event is not triggering when I click the custom placeholder, please suggest the best way to achive the select event, with out using jquery.

Please check the code

 <div id='placeholder' style='font-size:10px; dispaly:none;background-color:red;position:absolute;left:10px'> Options </div> <select id='selectcontrol' style='background-color:yellow; height:40px'> <option>Option A</option> <option>Option B</option> <option>Option C</option> </select>

Answer 1

• You can wrap your select and placeholder div with another div.
• Make select 's background transparent
• Make sure that your placeholder div is below the select using position:absolute for both of the elements

 <div style="background-color:yellow;height:40px;width:100px"> <div id='placeholder' style='font-size:10px;background-color:red;position:absolute;left:10px'> Options </div> <select id='selectcontrol' style='background-color:transparent; height:inherit;width:inherit;position:absolute;'> <option>Option A</option> <option>Option B</option> <option>Option C</option> </select> </div>