Displaying a div on click of select menu without showing the drop down JavaScript

Question

I have to make a customized drop down menu using JavaScript. On click of select box dropdown appears with the options, I need to customize the appearance of that menu.

My approach is to have a div with the options in it and required styling, when user clicks the select menu that div should appear instead of displaying drop down.

I tried using onclick() events but the dropdown menu appears before and then the div appears. This is not helping the cause.

Please suggest me how to achieve such requirement.

Answer 1

也许你可以隐藏选项？

option { display: none; }

Answer 2

为什么不完全用您自己的 DIV 完全替换？