Select size attribute size not working in Chrome/S

问题:

How to solve problem that select attribute size, like in code:

<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>

How can I get it working in Chrome and Safari?

回答1:

This is a known bug in webkit browsers.

The simplest way to get it to work just how you like it in Chrome and Safari would be to manually specify the styling the select itself.

Here is a 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;
}

回答2:

I use the size attribute in the HTML for "other" browsers and then specify webkit appearance in CSS. Other types of menu list options are available, textfield is not the only one. And you may need to mess with height based on font size. This makes it look about the same on all browsers.

CSS

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

回答3:

Include height: auto and it should work.

<select size="2" style="height: auto">
    <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>

回答4:

Try using the css property width of the select tag :

select {
  width:value px;
}