仅限CSS和HTML的解决方案

它似乎与Chrome、Firefox和Internet Explorer 11兼容。但请留下您对其他网络浏览器的反馈。

正如Danield的回答所建议的那样，我将我的选择包装在一个div中（甚至两个div用于x浏览器兼容性），以获得预期的行为。

看见http://jsfiddle.net/bjap2/

HTML格式：

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

注意两个div包装器。

还请注意，添加了额外的div以将箭头向下按钮放置在您喜欢的位置（绝对位置），这里我们将其放在左侧。

CSS

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837F;
}

/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}

select {
    margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}

select:focus {
    outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height: 10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}

对您可以通过标记名来设置任何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>

在现代浏览器中，在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）。

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

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

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

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

Safari和Google Chrome修复程序：

select {
  -webkit-appearance: none;
}

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

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

博客文章HowtoCSS表单下拉样式没有JavaScript适合我，但在Opera中失败了：

选择{边框：0无；颜色：#FFFFFF；背景：透明；字体大小：20px；字号：粗体；填充：2px 10px；宽度：378px；*宽度：350px；*背景：#58B14C；}#主要选举{溢出：隐藏；宽度：350px；-moz边框半径：9px 9px 9px 9px；-webkit边框半径：9px 9px 9px 9px；边框半径：9px 9px 9px 9px；方框阴影：1px 1px 11px#3330033；background:url（“arrow.gif”）无重复滚动319px 5px#58B14C；}<div id=“mainselection”><选择><option>选择选项</option><option>选项1</option><option>选项2</option></选择></div>