Button on the screen has a temperature, drop-down box pop-up button is clicked the selected temperature.
Requirements pop-up drop-down boxes and drop-down box select control the same.
Implementation:
Covered with a transparent temperature select button of the same size on a temperature control button.
Click the button when the temperature is actually clicked on select control.
code show as below:
<div style="width:220px;height:220px;background-image:url(button.jpg);overflow:hidden;">
<select style="width:240px;height:222px;border:none;margin-left:-1px;margin-top:-1px;color:transparent;background-color:transparent;-webkit-appearance: none;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>key point:
1, div's overflow is set to hidden.
2, the width of the select control is greater than the width of the div plus the drop-down arrow select control's width, so as to hide the drop-down arrow select control.
3, the height of the select control to control the height of the div + 2, marging-left, marging-top as -1px, guaranteed not revealed the secret when select control has the focus.
4, select foreground and background colors of controls should be made transparent.
5, in order to be compatible browsers, plus -webkit-appearance: none;