css - 選択ボックスのパディング

Question

選択ボックスを css でスタイルするのは少し面倒ですが、高度なテクニックに頼らなくても、パディングを追加して、右側の矢印にパディングを追加せずにテキストを少し押し下げることができますか?

Answer 1

これを CSS クラスに追加します。多分これは役立ちますか？

-webkit-appearance:none;
-moz-appearance:none;
appearance:none;

Answer 2

selectボックスはブラウザや特にオペレーティング システムによって表示が異なるため、一貫性を保証することはできません。

たとえば、Mac で実行できるフォーマットの最小量は次のとおりです。

select { height:40px; background:transparent; }

次のようになります。

Answer 3

ここでの興味深いテスト http://cssdeck.com/labs/styling-select-box-with-css3

作成者は右側の矢印を隠して独自の矢印を作成し、ベンダー プレフィックス付きの css を使用してさまざまなブラウザーをターゲットにしました。それを行った後、パディングはすべて無料です。