【问题标题】: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 元素呈现为列表框;它们可以使用任何其他机制,例如下拉菜单。
      (强调我的)

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-07-19
        • 2023-03-23
        • 1970-01-01
        • 2021-06-02
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多