Diy Select

<select/> 在不同的系统不同的显示器下表现各异,无法统一。但可以用其它的 HTMLElement 来模拟,其好处是你可以对其使用自定义样式,而且在各个环境下保持一致;缺点也显而易见,毕竟是人工模拟,很难做到完美,比如浏览器窗口不是最大化时,由于 <select/> 属于窗体控件可溢出浏览器边界悬浮于视窗之上,而普通的 HTMLElement 无法做到这点。

JS 代码如下:

CSS 代码如下:

箭头图标:

updated:

项目已迁至 GitHub

查看 Demo:

View on GitHub