ホームページ >ウェブフロントエンド >htmlチュートリアル >純粋な CSS を使用してドロップダウン リストのデフォルト スタイルを変更します。 box_html/css_WEB-ITnose を選択します。

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

WBOY
WBOYオリジナル
2016-06-24 11:22:361154ブラウズ

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

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

るー

るー

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。