选择尺寸属性尺寸在 Chrome/Safari 中不起作用？

Posted 2023-03-05

【中文标题】选择尺寸属性尺寸在 Chrome/Safari 中不起作用？

【英文标题】：Select size attribute size not working in Chrome/Safari?

【发布时间】：2013-03-23 12:14:22

【问题描述】：

如何解决选择属性大小的问题，如代码中：

<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 中运行？

【问题讨论】：

你是对的，哦刚刚忘记了。

对于 2,3,4，大小不起作用，但对于其余部分，它是 works。真奇怪。

是的，它有帮助。而且我的声望不到 15 并且无法接受。

【参考方案1】：

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

select 
  width:value px;

【讨论】：

select width:24px; 和 size=2 是两个不同的薄。尺寸制作如那里：i.stack.imgur.com/OSBo9.png

【参考方案2】：

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

【讨论】：

这真的有效吗？它不适用于我的 webkit 真实设备。所有这一切都是增加下拉菜单的高度，而不是显示更多元素，因为 size 属性继续被忽略。然而这么多人投票，所以我想知道我是否做错了什么？

【参考方案3】：

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

CSS

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

【讨论】：

这真的可以在真实设备上运行吗？它对我不起作用，因为 size 属性继续被忽略。

这是旧线程，但我仍然想补充一点，它在移动浏览器中不起作用

【参考方案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>

【参考方案5】：

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