在设置选择下拉列表样式时，我注意到的最大的不一致是Safari和Google Chrome渲染（Firefox可以通过CSS完全自定义）。在互联网的黑暗深处进行了一些搜索后，我发现了以下内容，这几乎完全解决了我对WebKit的疑虑：

Safari和Google Chrome修复程序：

select {
  -webkit-appearance: none;
}

但是，这会删除下拉箭头。您可以使用带有背景、负边距或绝对位于select下拉列表上方的附近div添加下拉箭头。

*CSS属性：-webkit外观中提供了更多信息和其他变量。

Danield回答中的第三种方法可以改进，以处理悬停效果和其他鼠标事件。只需确保“button”元素正好位于标记中的select元素之后。然后使用+CSS选择器将其作为目标：

HTML格式：

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

然而，当悬停在select元素上的任何位置时，这将显示悬停效果，而不仅仅是“按钮”上。

我将此方法与Angular结合使用（因为我的项目恰好是Angular应用程序），以覆盖整个select元素，并让Angular在“button”-元素中显示所选选项的文本。在这种情况下，将鼠标悬停在所选对象上的任何位置时，悬停效果都是非常合理的。

如果没有JavaScript，它就无法工作，所以如果您想这样做，并且您的站点必须在没有JavaScript的情况下工作，那么您应该确保您的脚本添加了增强所需的元素和类。这样，没有JavaScript的浏览器只会得到一个正常的、未样式的select，而不是一个无法正确更新的样式徽章。

select元素及其下拉功能很难设置样式。

Chris Heilmann的select元素的风格属性证实了Ryan Dohery对第一个答案的评论：

“select元素是操作系统，而不是浏览器chrome。因此风格不可靠，尝试也不一定有意义无论如何"

纯交叉浏览器CSS选择控件样式

规则#1：切勿使用JAVASCRIPT来设置HTML元素的样式！

如果JS被禁用或阻止，CSS将崩溃并烧录。始终从纯CSS开始，然后在您喜欢的任何额外“脚本胶”上分层。记住<select>控件（如HTML中的所有表单字段）被替换为元素，这意味着设备上的浏览器和操作系统对控件的设计和布局具有一定的控制权。这就是为什么Windows、苹果和移动设备控件看起来都不同！这是有原因的。

不要用JavaScript或CSS黑客劫持控件设计，除非您觉得UI由于某种原因（如删除选择控件上的箭头）必须进行修改。下面的CSS不这样做。它接受了它可以在选择表单控件中重新设计的核心限制。我仍然会从我干净的CSS解决方案开始，然后在顶部覆盖任何自定义“黑客”。如果它们失败了，那么您的CSS将优雅地退回到一个始终适用于20多年浏览器的全局CSS设计。。。加上未来的！

下面的CSS代码跨浏览器（从1990年代到现在）工作，并将所有浏览器（过去和现在）与相同的基本CSS设计对齐。您可以根据需要自定义此代码。你可以在非常旧的浏览器中测试它，它应该给你一个与现代HTML5浏览器相匹配的外观和感觉，这应该一直是目标。

/* This CSS works in 20+ years of browsers without hacks, scripts, or tricks. */

body optgroup,
body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
    margin: 0;
    padding: 0;
    font-style: inherit;
    font-weight: bold;
    cursor: pointer;
    background: #fff;
    border: none;
}

body optgroup:visited,
body optgroup:hover,
body optgroup:focus,
body optgroup:active {
    background: #f9f9ff;
}

body option,
body option:visited,
body option:hover,
body option:focus,
body option:active {
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #fff;
    border: none;
}
body option:visited,
body option:hover,
body option:focus,
body option:active {
    background: #f9f9ff;
}

body select,
body select:visited,
body select:hover,
body select:focus,
body select:active {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: none;
    padding: .17em .17em;
    margin: 0;
    text-transform: none;
    border-radius: .2em;
    border: 2px solid #bbb;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: listbox;
    -moz-appearance: listbox;
    line-height: normal;
}

body select:visited,
body select:hover,
body select:focus,
body select:active {
    background: #f9f9ff;
    border: 2px solid #999;
}
body select:focus {
    background: #fff;
    border: 2px solid #999;
}

body select:required:visited:valid,
body select:required:valid {
    background: #fff;
    border: 2px solid #7fbe96;
}

body select:required:hover:valid {
    background: #f9f9ff;
    border: 2px solid #278b3d;
}

body select:required:focus:valid {
    background: #fff;
    border: 2px solid #278b3d;
}

body select:required:visited:invalid,
body select:required:invalid {
    background: #fff;
    border: 2px solid #ff6565;
}

body select:required:hover:invalid {
    background: #f9f9ff;
    border: 2px solid #ce2f2f;
}

body select:required:focus:invalid {
    background: #fff;
    border: 2px solid #ce2f2f;
}

body select[disabled],
body select[readonly],
body select[disabled="disabled"],
body select[readonly="readonly"],
body select[disabled]:visited,
body select[readonly]:visited,
body select[disabled="disabled"]:visited,
body select[readonly="readonly"]:visited,
body select[disabled]:hover,
body select[readonly]:hover,
body select[disabled="disabled"]:hover,
body select[readonly="readonly"]:hover,
body select[disabled]:focus,
body select[readonly]:focus,
body select[disabled="disabled"]:focus,
body select[readonly="readonly"]:focus,
body select[disabled]:active,
body select[readonly]:active,
body select[disabled="disabled"]:active,
body select[readonly="readonly"]:active {
    border: 2px solid #bbb;
    background: #f0f0f0;
    color: #999;
    cursor: default !important;
}

在设置选择下拉列表样式时，我注意到的最大的不一致是Safari和Google Chrome渲染（Firefox可以通过CSS完全自定义）。在互联网的黑暗深处进行了一些搜索后，我发现了以下内容，这几乎完全解决了我对WebKit的疑虑：

Safari和Google Chrome修复程序：

select {
  -webkit-appearance: none;
}

但是，这会删除下拉箭头。您可以使用带有背景、负边距或绝对位于select下拉列表上方的附近div添加下拉箭头。

*CSS属性：-webkit外观中提供了更多信息和其他变量。

label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

这对选定的元素使用了背景色，我删除了图像。。