セレクトボックスでのパディング

私は選択ボックスがCSSでスタイルを設定するのに苦労していることを知っていますが、アドバンスドテクニックに頼ることなく、とにかくパディングを追加して、右手に矢印がありますか？ここ http://cssdeck.com/labs/styling-select-box-with-css3 セレクトボックスでのパディング

2012-04-16 Brett

あなたは多分にパディングを変更することを試みることができますネストされた「オプション」要素ちょっと考えて... –

いいえ、ありません。選択ボックスのスタイリングは、痛みを言いました。この理由から、選択ボックス用のjQueryプラグインが数多くあります。リストボックスの利用可能なクロスブラウザスタイルは非常に限られています。 –

これはあなたが望んでいるものではありませんか？ http://jsfiddle.net/LpvDg/ – Wasbazi

興味深いテストでは、著者は、右側の矢印をカバーし、異なるブラウザを対象とするベンダー接頭辞CSSを使用して、独自のを作成しました。それをした後、あなたのパッディングはすべて無料です。

2013-08-10 21:19:59 commonpike

ok ..私はそれらのdownvotesに値する。それは私のコードではありません。その興味深いですが、それは事例の90％で動作する純粋なCSSソリューションです。 – commonpike

これをCSSクラスに追加します。これはおそらく助けになるでしょうか？ selectボックスが異なるブラウザ、特にオペレーティング・システム上で表示が異なる

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

2014-01-10 09:45:20 Demilio

それは矢印を隠しています。 – romainm

ので、あなたは一貫性を保証することはできません。

例えば、私はMac上で実行できる書式設定の最小限の量はこれです：

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

そして、このように見える：

Select Box

2014-01-10 10:36:30 redolent

あなたは何か提案がありますか？ –

カスタム選択ボックスをお勧めします。たとえば、次のようにします。https://jqueryui.com/selectmenu/ – redolent

答えて