在设置选择下拉列表样式时，我注意到的最大的不一致是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，而不是一个无法正确更新的样式徽章。

这是一个适用于所有现代浏览器的版本。关键是使用外观：无，这将删除默认格式。由于所有的格式都不存在了，您必须重新添加箭头，以在视觉上区分选择和输入。

工作示例：https://jsfiddle.net/gs2q1c7p/

选择：不（[多个]）{-webkit外观：无；-moz外观：无；背景位置：右50%；背景重复：无重复；背景图像：url（数据：image/png；base64，iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRR vYmU6bnM6bWV0YS8IIHg6eG1wdGs9IkFkb2JlIFhNUCBDB3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbeG1wPSJodHwOi8 vbnMuYWRvYmUuY29tL3hhcC8xLjAvIB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1spnM 6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9ZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtC5paWQ6NDZFNDEWNjlGNzFEMTFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9固有C5kaWQ6NDZFND EWNkFGNzFEMTFTFMkJEQ 0VDRTM10RCMz MyMkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZ WY6ZG9jdW1lbnJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAMAzNENEOH+do8AAAAAASUVORK5CYII=）；衬垫：.5cm；右侧填充：1.5em}#我的选择{边框半径：0}<select id=“mySelect”><option>选项1</option><option>选项2</option></选择>

对您可以通过标记名来设置任何HTML元素的样式，如下所示：

select {
  font-weight: bold;
}

当然，您也可以像其他任何元素一样使用CSS类来设置其样式：

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

本机解决方案

下面是一个简单的HTML/CSS示例：https://jsfiddle.net/dkellner/e1jdspvb/

诀窍：由于某种原因，当你给select标记一个size属性时，它会突然理解CSS。通常，此属性用于创建始终可见的固定高度列表，但作为一个副作用，您现在可以对其进行样式设置。因此，我们所做的只是给它一个大小，然后实现显示/隐藏机制，以返回下拉列表的感觉。

简约版，不像示例那样时尚，但更容易理解：

<style>

    .stylish > span {position:relative;}
    .stylish select {position:absolute;left:0px;transform:scaleY(0);transform-origin:top center;}
    .stylish.dropped-down select {transform:scaleY(1);}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input   onclick  = "this.closest('div').classList.toggle('dropped-down');"><br>
        <select  onclick  = "this.closest('div').classList.remove('dropped-down');"
                 onchange = "this.closest('div').querySelector('input').value=this.value;"
                 size=9
        >
            <optgroup label="Fantasy"></optgroup>

            <option value="gandalf">  Gandalf       </option>
            <option value="harry">    Harry Potter  </option>
            <option value="jon">      Jon Snow      </option>

            ...                
            
        </select>
    </span>
</div>

附加说明

这实际上实现了一个可编辑的下拉列表；使用只读以避免编辑＜optgroup＞标记是空的（不是围绕选项标记），这样更具风格

在现代浏览器中，在CSS中设置＜select＞的样式相对轻松。外观方面：唯一棘手的部分是替换箭头（如果你想要的话）。下面是一个使用内联data:URI和纯文本SVG的解决方案：

选择{-moz外观：无；-webkit外观：无；外观：无；背景重复：无重复；背景尺寸：0.5em自动；背景位置：右0.25em中心；右侧填充：1em；backgroundimage:url（“data:image/svg+xml；charset=utf-8\<svg xmlns='http://www.w3.org/2000/svg'viewBox='0 0 60 40'>\<多边形点=',0 60,0 30,40'style='fill:black；'/>\</svg>“）；}<选择><option>选项1</option><option>选项2</option></选择><select style=“font-size:2rem；”><option>选项1</option><option>选项2</option></选择>

其余的样式（边框、填充、颜色等）相当简单。

这适用于我刚刚尝试过的所有浏览器（Firefox 50、Chrome 55、Edge 38和Safari 10）。关于Firefox的一个注意事项是，如果你想在数据URI中使用#字符（例如，fill:#000），你需要转义它（fill:%23000）。