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

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

WBOY

リリース： 2016-06-24 11:22:36

オリジナル

1108 人が閲覧しました

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

 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 プロパティを、小さな矢印を覆う領域を超えて非表示に設定します。次に、背景画像を親コンテナに追加します。

るー