jquery - 如何为 html 选择标签(跨浏览器)创建自定义设计(带图像)？

Question

我正在尝试找到一种创建跨浏览器(所有主要浏览器)选择标签的方法，该标签具有满足要求的自定义设计:

• 使用几行代码
• 跨浏览器
• 快速(不要在用户看到页面后 1-2 秒加载)
• 易于复制

---

我发现一些只适用于 firefox 和其他使用 webkit 但与其他样式混淆。然后我开始炒一些脑细胞来检查我的选择。我尝试了这些:

第一个解决方案

仅使用 css 将图像用作背景，但我无法删除 chrome 上的边框活跃时。由于 -webkit-appearance: none; 箭头被删除(这很好)，但我不能在 firefox 上这样做.

第二个解决方案

尝试替换/使用 select as a div在 jquery 的帮助下，有些人建议使用这个 plugin made by some guys on bulgaria ，这看起来很棒，但我仍然认为它太花哨了。

第三个解决方案

在选择的顶部添加一个 span/div 标签。我在这个上花了一些时间，但我自己做不到。找到一个question从 1 年前开始，我在尝试实现时遇到了一个问题，那就是模拟对选择标签的点击(就像用户点击了一样)。最后我决定选择 uniform .虽然他们的插件比我需要的要多，但它也适合解决问题。

---

第一个解决方案根本无法解决我的问题(可能是错误的方法或 css 代码)。第二个和第三个使用了太多的代码行(作为插件和所有)。有没有其他我没有想到的方式或者符合所有要求的东西？

Answer 1

Formalize是一个相当整洁和直接的插件。 是的，它依赖于 jquery，但假设网站的架构是高质量的，它不会影响首次缓存 .js 文件后的呈现。

如果您的网站大量使用 ajax 来传送页面内容，则可以完全避免任何 pre-domready 无样式内容的闪现。