純粋な CSS を使用してドロップダウン リストのデフォルト スタイルを変更します。 box_html/css_WEB-ITnose を選択します。

ブラウザのデフォルトのドロップダウン ボックス スタイルをクリアしてから、独自のスタイルを適用し、右揃えの小さな矢印の画像を添付します。

 1 select { 2 /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ 3   border: solid 1px #000; 4  5 /*很关键：将默认的select选择框样式清除*/ 6   appearance:none; 7   -moz-appearance:none; 8   -webkit-appearance:none; 9 /*在选择框的最右侧中间显示小箭头图片*/10   background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;11 /*为下拉小箭头留出一点位置，避免被文字覆盖*/12   padding-right: 14px;13 }14 /*清除ie的默认选择框样式清除，隐藏下拉箭头*/15 select::-ms-expand { display: none; }

IE8/9 は、Appearance:none CSS 属性をサポートしていません。これをサポートしたい場合は、SF: 親コンテナを追加する必要があります。小さな矢印をカバーするために使用し、右に小さなオフセットを追加するか、選択の親要素よりも大きな幅を追加します。親の CSS プロパティを、小さな矢印を覆う領域を超えて非表示に設定します。次に、背景画像を親コンテナに追加します。

るー

るー