如何在Angular中修复select下拉选项高度过大、size=10不生效问题

解决步骤 #

• 先修正属性写法：把你代码里的size=10改成标准格式size="10"，部分浏览器对无引号的数值属性解析存在兼容问题，修改后先测试是否生效。
• 排查样式覆盖：原生select的size属性生效的前提是没有更高优先级的CSS规则给select设置了固定高度或者max-height。你用的Ionic框架自带原生表单元素的重置样式，加上你自定义的ci-sec-head、ci-mr-15类的样式规则，大概率覆盖了size属性对应的高度逻辑，直接给select补充高度和溢出规则即可：
  把现有select的style属性修改为：
  style="border:transparent; width: 50%; height: 200px; overflow-y: auto;"
  这里的200px对应10个常规高度option的总高度，你可以根据自己的单选项高度按需调整数值。
• 如果需要更精准的高度控制，可以额外加css控制option的高度：

  #years option {
    height: 20px;
  }
  

• 特殊情况说明：部分移动端浏览器会默认把原生select替换为系统级弹窗选择器，这种场景下size属性和自定义高度都不会生效，如果你需要在移动端也控制展开列表的高度，建议替换为Ionic官方的ion-select组件，通过组件自带的API控制显示条数即可。

内容的提问来源于stack exchange，提问作者shirish lakhe