3つのソリューションがあります。
ソリューション＃1-外観：なし-Internet Explorer 10から11の回避策（デモ）
-
appearance: noneselect要素に設定されているデフォルトの矢印を非表示にするには、独自のカスタム矢印を追加しますbackground-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
ブラウザサポート：
appearance: noneは非常に優れたブラウザサポート（caniuse）を備えています-Internet Explorer 11以降およびFirefox 34以降を除きます。
以下を追加することにより、この手法を改善し、Internet Explorer 10およびInternet Explorer 11のサポートを追加できます。
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Internet Explorer 9が問題である場合、デフォルトの矢印を削除する方法はありません（つまり、2つの矢印があることになります）が、ファンキーなInternet Explorer 9セレクターを使用できます。
少なくともカスタム矢印を元に戻すには-デフォルトの選択矢印をそのままにします。
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
すべて一緒に：
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
このソリューションは簡単で、ブラウザが適切にサポートされています。通常はこれで十分です。
Internet Explorer 9（およびそれ以降）およびFirefox 34（およびそれ以降）のブラウザーサポートが必要な場合は、読み続けてください...
ソリューション＃2 select要素を切り捨ててデフォルトの矢印を非表示にする（デモ）
-
（詳細はこちら）
ラップselectでのdiv内の要素を一定の幅とoverflow:hidden。
次に、select要素にdivよりも約20ピクセル大きい幅を与えますます。
その結果、select要素のデフォルトのドロップダウン矢印が非表示になります（overflow:hiddenコンテナー上にあるため）、必要な背景画像をdivの右側に配置できます。
このアプローチの利点は、クロスブラウザー（Internet Explorer 8以降、WebKit、Gecko）であることです。ただし、このアプローチの欠点は、オプションのドロップダウンが右側に突き出ていることです（オプションエレメントがselectエレメントの幅を取るため、非表示にした20ピクセル分）。
[ただし、カスタムのselect要素がモバイルデバイスにのみ必要な場合、上記の問題は当てはまりません。各電話機がネイティブでselect要素を開く方法が原因です。したがって、モバイルの場合、これが最善の解決策になる可能性があります。]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
Firefoxでカスタム矢印が必要な場合- バージョン35より前が、古いバージョンのInternet Explorerをサポートする必要がない場合は、読み続けてください...
解決策＃3- pointer-eventsプロパティを使用する（デモ）
-
（詳細はこちら）
ここでのアイデアは、ネイティブのドロップダウン矢印の上に要素をオーバーレイし（カスタムドロップダウン矢印を作成するため）、その上でのポインターイベントを許可しないことです。
利点： WebKitとGeckoでうまく機能します。それも見栄えが良い（option要素を突き出さない）。
欠点： Internet Explorer（Internet Explorer 10以前）はサポートしていませんpointer-events以前。つまり、カスタム矢印をクリックできません。また、この方法のもう1つの（明らかな）欠点は、ホバーエフェクトまたはハンドカーソルを使用して新しい矢印の画像をターゲットにできないことです。
ただし、この方法では、Modernizerまたは条件付きコメントを使用して、Internet Explorerを標準の組み込み矢印に戻すことができます。
注意： Internet Explorer 10はconditional commentsもうサポートしていません。このアプローチを使用する場合は、おそらくModernizrを使用する必要があります。ただし、ここで説明するCSSハックを使用して、ポインタイベントCSSをInternet Explorer 10から除外することは可能です。
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->