从InternetExplorer10开始，您可以使用：：-ms-expand伪元素选择器来样式和隐藏下拉箭头元素。

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

其余的样式应该与其他浏览器类似。

下面是Danield的jsfiddle的一个基本分支，它应用了对IE10的支持

我有这个确切的问题，除了我不能使用图像，而且不受浏览器支持的限制。这应该是“符合规范”，幸运的话，最终开始在各地工作。

它使用分层旋转的背景层来“剪切”下拉箭头，因为伪元素不适用于select元素。

编辑：在这个更新版本中，我使用了CSS变量和一个小型主题系统。

：根目录{--半径：2px；--baseFg：灰色；--baseBg：白色；--重音Fg:#006fc2；--重音Bg:#bae1ff；}.主题粉色{--半径：2米；--baseFg:#c70062；--baseBg:#ffe3f1；--重音Fg:#c70062；--重音Bg:#ffaad4；}.主题结构{--半径：0；--baseFg：白色；--baseBg：黑色；--accentFg：黑色；--accentBg：橙色；}选择{字体：400 12px/1.3无衬线；-webkit外观：无；外观：无；颜色：var（--baseFg）；border:1px实体变量（--baseFg）；线高：1；大纲：0；衬垫：0.65em 2.5em 0.55em 0.75em；边界半径：var（--radius）；背景色：var（--baseBg）；背景图像：线性梯度（var（--baseFg）、var（--baseFg）），线性梯度（-135度，透明50%，var（--accentBg）50%），线性梯度（-225度，透明50%，var（--accentBg）50%），线性梯度（var（--accentBg）42%，var（--accentFg）42%）；背景重复：无重复，无重复，不重复，无反复；背景大小：1px 100%，20px 22px，20px 22 px，20px 100%；背景位置：右20px中心，右下，右下和右下；}选择：悬停{背景图像：线性梯度（var（--accentFg），线性梯度（-135度，透明50%，var（--accentFg）50%），线性梯度（-225度，透明50%，var（--accentFg）50%），线性梯度（var（--accentFg）42%，var（--accentBg）42%）；}选择：活动{背景图像：线性梯度（var（--accentFg），线性梯度（-135度，透明50%，var（--accentFg）50%），线性梯度（-225度，透明50%，var（--accentFg）50%），线性梯度（var（--accentFg）42%，var（--accentBg）42%）；颜色：var（--accentBg）；边框颜色：var（--accentFg）；背景色：var（--accentFg）；}<选择><option>这么多选项</option><选项></选项></选择><select class=“主题粉色”><option>这么多选项</option><选项></选项></选择><select class=“主题构建”><option>这么多选项</option><选项></选项></选择>

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，而不是一个无法正确更新的样式徽章。

博客文章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>

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;
}

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

仅限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;
}