サイズ属性のサイズをChrome/Safariで使用できません。コードのように、属性のサイズを選択する問題を解決する方法

Question

：

<select size="2"> 
    <option value="0" selected="selected">Default</option> 
    <option value="1">select 1</option> 
    <option value="2">select 2</option> 
    <option value="3">select 3</option> 
</select> 

は、どのように私はそれはChromeとSafariで働いて得ることができますか？

Answer 1

は、selectタグのCSSプロパティwidthを使用してみてください：

select { 
    width:value px; 
} 

Answer 2

これはknown bug in webkit browsersです。

ChromeとSafariで好きなように動作させる最も簡単な方法は、選択するスタイルを手動で指定することです。

ここにはworking jsFiddleがあります。

HTML：

<select size="2"> 
    <option value="0" selected="selected">Default</option> 
    <option value="1">select 1</option> 
    <option value="2">select 2</option> 
    <option value="3">select 3</option> 
</select> 

CSS：

select { 
    height:36px; 
    font-size:14px; 
} 

Answer 3

は、私が "その他" のブラウザ用HTMLでサイズ属性を使用して、CSSでのWebKitの外観を指定します。他のタイプのメニューリストオプションも利用できますが、テキストフィールドだけではありません。そして、あなたはフォントのサイズに基づいて高さを混乱させる必要があるかもしれません。これにより、すべてのブラウザで同じように見えます。あなたが正しいです

CSS

select{ 
    -webkit-appearance: menulist-textfield; 
    height: 45px; 
}