gmail中的下拉框和按钮

Question

如何使用CSS和JS为<option>和<button>执行此效果？

Answer 1

这不是真正的<select>或<button>元素。真正的表单元素（如果它是开头的表单元素）替换为简单样式的<ul>（其中一个选项）。并且javascript用于隐藏选择元素，将其替换为列表并将事件附加到列表项/锚点。

编辑：Gmail表情符号不使用列表，而是使用div。这也是一个选择..它背后的逻辑仍然是相同的。

Answer 2

试试this。你必须改变图像和颜色。