CODEWITHSUNDEEP
javascripthtmlcssselect
Nikhil K S
Nikhil K S

Reputation: 804

How to trigger select change event from custom placeholder

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.

enter image description here

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>

Upvotes: 0

Views: 216

Answers (1)

firatozcevahir
firatozcevahir

Reputation: 882

  • 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>

Upvotes: 1

Related Questions