ホームページ >ウェブフロントエンド >htmlチュートリアル >純粋な 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 プロパティを、小さな矢印を覆う領域を超えて非表示に設定します。次に、背景画像を親コンテナに追加します。
るー
るー