尺寸不适用于移动设备中的 SELECT OPTION答案

【问题标题】：Size not working for SELECT OPTION in mobile尺寸不适用于移动设备中的 SELECT OPTION
【发布时间】：2017-03-29 02:44:14
【问题描述】：

在 PC 上查看时，以下代码显示所有四个选项。没关系！

但是，在移动设备上查看时，仅显示默认选项。这是实际问题。

注意：如果我省略size="4"，那么PC上的输出与上面提到的手机上的输出相同。 size="4" 似乎不适用于移动设备。

请问如何解决这个问题。

.myClass select 
{
    width: 150px;
    height: 165px;
    padding: 5px;
    font-size: 17px;
}

<div class="myClass">
    <select name="mySelect" size="4">
        <option>1</option>
        <option selected>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
    </select>
</div>

【问题讨论】：

标签： html css mobile

【解决方案1】：

听起来很奇怪，但是值 2,3,4 大小 attr 在某些设备（可能是 webkit 浏览器）上不起作用，这是一个已知的错误。

您也许可以根据 mediaquery 手动设置选项标签的数量。

【讨论】：

使用 2,3,4 以外的值结果是一样的
是的，刚刚做了一个快速的研究。似乎 webkit 浏览器完全忽略了属性“size”。（在 chrome 中尝试，然后在非 webkit 浏览器中尝试：jsfiddle.net/k669sm2n）
尺寸仍然被移动设备忽略。除了使用 Select Option 有什么办法吗？

【解决方案2】：

嗯，只是盲目猜测，但可能在 CSS 中禁用 appearance？

参考：https://css-tricks.com/almanac/properties/a/appearance/

【讨论】：

【解决方案3】：

这是一种常见的情况。许多人都处理过这个问题：

显然，这是因为浏览器不需要像我们预期的那样呈现size="" 属性。 W3 specs:

尺寸 = 数字 [CN]
如果 SELECT 元素显示为滚动列表框，则此属性指定列表中应同时可见的行数。 视觉用户代理不需要将 SELECT 元素呈现为列表框；它们可以使用任何其他机制，例如下拉菜单。
（强调我的）

【讨论】：