Question

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

Answer 1

听起来很奇怪，但是在某些设备（可能是webkit浏览器）上运行2,3,4尺寸的值时，这是一个已知的错误。

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

Answer 2

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

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

Answer 3

这是一个普通的情况。许多人已经处理过这个问题：

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

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

大小不适用于移动设备中的SELECT OPTION

3 个答案: