如何为html选择标记(crossbrowser)创建自定义设计(带图像)？

Question

我正在尝试找到一种创建crossbrowser(所有主流浏览器)的方法,选择符合要求的自定义设计标签:

我找到的一些只适用于firefox和其他使用webkit,但与其他样式相混淆.然后我开始煎炸一些脑细胞来检查我的选择.我试过这些:

使用图像作为背景只有css,但我无法在活动时删除chrome上的边框.由于-webkit-appearance: none;箭头被删除(这是伟大的),但我无法在Firefox上做到这一点.

尝试用jquery帮助替换/使用select作为div,有些人建议使用这个插件由保加利亚的一些人制作,这看起来很棒,但我仍然觉得它太花哨了.

在select的顶部添加span/div标签.我花了一些时间在这个上,而不能靠我自己做.发现了一个问题,从1年前大约在落实,这是模拟在选择标签的点击(就好像用户已经点击)我遇到了一个问题.最后我决定穿制服.虽然他们的插件比我需要的更多,但它也适合解决问题.

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

Answer 1

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

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