如何设置 <select> 样式只有 CSS 的下拉菜单? [英] How do I style a &lt;select&gt; dropdown with only CSS?

查看：23
本文介绍了如何设置 <select> 样式只有 CSS 的下拉菜单?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否有一种仅使用 CSS 的方式来设置 表单设置样式，而不需要任何 JavaScript.我可以在 CSS 中使用哪些属性来做到这一点?

此代码需要兼容所有主流浏览器:

  • Internet Explorer 6、7 和 8
  • 火狐
  • Safari

我知道我可以用 JavaScript 做到这一点:一>)

--

(在此处阅读更多内容)

这里的想法是在原生下拉箭头上覆盖一个元素(以创建我们的自定义下拉箭头)，然后禁止在其上发生指针事件.

优点:它在 WebKit 和 Gecko 中运行良好.它看起来也不错(没有突出 option 元素).

缺点: Internet Explorer(Internet Explorer 10 及以下)不支持 pointer-events，这意味着您无法点击自定义箭头.此外，此方法的另一个(明显)缺点是您无法使用悬停效果或手形光标定位新的箭头图像，因为我们刚刚禁用了它们上的指针事件！

但是，通过这种方法，您可以使用 Modernizer 或条件注释使 Internet Explorer 恢复到标准内置箭头.

注意: Internet Explorer 10 不再支持条件注释:如果您想使用这种方法，您可能应该使用 Modernizr强>.但是，仍然可以使用此处描述的 CSS hack 从 Internet Explorer 10 中排除指针事件 CSS.>

.notIE {位置:相对；显示:内联块；}选择 {显示:内联块；高度:30px；宽度:150px；大纲:无；颜色:#74646E；边框:1px 实心 #C8BFC4；边框半径:4px；框阴影:插入 1px 1px 2px #DDD8DC；背景:#FFF；}/* 选择箭头样式 */.notIE .fancyArrow {宽度:23px；高度:28px；位置:绝对；显示:内联块；顶部:1px；右:3px；背景: url(https://stackoverflow.com/favicon.ico) 正确/90% 无重复 #FFF；指针事件:无；}/*目标 Internet Explorer 9 和 Internet Explorer 10:*/@media 屏幕和(最小宽度:0){.notIE .fancyArrow {显示:无；}}