チェックアウト http://demo.neeraj.name/admin_data ChromeとFirefoxの両方で。 Firefoxでは、選択ボックスの高さが大きくなっています。 Chromeでは、セレクトボックスの高さは非常に小さいです。
クロムとサファリの選択ボックスをFirefoxの選択ドロップダウンのようにするにはどうすればよいですか？
回答：
回答№1の146私は以前にこの問題に出くわした
select要素の高さを設定することはウィンドウズのウェブキットでうまく働きますが、マックのウェブキットで失敗します。
css属性を設定した場合
-webkit-appearance: menulist-button;
それは高さがきちんと働くようにしますMac、しかしそれは窓にこの奇妙な黒い境界線を作ります。 css borderプロパティを設定することで境界線を調整できますが、それによってWebkitだけでなく、選択した境界線のスタイルを設定できるすべてのブラウザの外観が変わります。
この時点で、私はあきらめました、しかしあなたがさらに調査したいならば、うまくいけばそれは良い出発点です。
回答№2の31
増加 line-height.
回答№3の17
高さ あなたが持っていない限りSafariでは動作しません バックグラウンド セット。背景を設定すると、SafariのWindows版でドロップダウン矢印が表示されなくなることがあります。また、フォームのスタイルは問題を抱えているようです。
回答№4のための8
CSSボーダープロパティを使用してください。選択枠をなしまたは0にします。 国境：なし; Mac OSでクロムとサファリで完璧に表示
答え№5の7
@Chiの答えは正しいです。もう1つの簡単な方法は、ボーダーCSSスタイルを追加することです。
{を選択 ボーダー：1ピクセルソリッド#CCC }
これは両方とも-webkit-appearance：menulist-buttonプロパティを引き起こし、醜い黒い境界線を削除するという追加の利点があります:)。
答え№6の2
私はjQueryを使った コンボボックス このため。
これにより、必要なCSSクラスの高さを選択ボックスに必要な高さに設定できます。
回答№7の場合は1
あなたは同様に高さを助けるためにfont-sizeを増やすことができます。私はSafariのMacは最大16pxのフォントサイズを表示すると思います。少なくとも大きなクリック領域を取得します。
回答№8については1
つかいます 行の高さ サファリのためにその作業。
回答№9の場合は0
サンプルページはGoogle Chrome 4とSafari 4で動作します
回答№10は0
単にheightプロパティを設定してください。 line-heightはWindowsのSafariでは機能しましたが、Macでは機能しませんでした。身長は両方に働いた。