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

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

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

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

本机解决方案

下面是一个简单的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＞标记是空的（不是围绕选项标记），这样更具风格

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

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

纯交叉浏览器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;
}

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

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

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