html - 选择大小属性大小在 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

这是webkit 浏览器中的一个已知错误。

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

这是一个工作 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

包括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 3

我将 HTML 中的 size 属性用于“其他”浏览器，然后在 CSS 中指定 webkit 外观。其他类型的菜单列表选项可用，文本字段不是唯一的。而且您可能需要根据字体大小来处理高度。这使得它在所有浏览器上看起来都差不多。

CSS

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

Answer 4

我可以通过在选择标签中添加“多个”选项来解决这个问题。

Answer 5

尝试使用widthselect 标签的 css 属性：

select {
  width:value px;
}