选择尺寸属性尺寸无法在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

这是一个known bug in webkit browsers。

让它在Chrome和Safari中按照您喜欢的方式工作的最简单方法是手动指定样式选择本身。

这是一个working jsFiddle。

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

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

Answer 2

我在HTML中为“其他”浏览器使用size属性，然后在CSS中指定webkit外观。其他类型的菜单列表选项可用，textfield不是唯一的选项。而且你可能需要根据字体大小弄乱高度。这使得它在所有浏览器上看起来都一样。

CSS

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

Answer 3

我能够通过在select标签中添加“multiple”选项来解决这个问题。

Answer 4

包括height: auto，它应该工作。

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

Answer 5

尝试使用select标签的css属性width：

select {
  width:value px;
}