HTML下拉框添加过渡动效技巧

  
    请选择城市
    北京
    上海
    广州
  

  
    请选择城市
  

  

    
北京
    
上海
    
广州
  

max-height 过渡的坑：别设 max-height: 0 → auto

CSS 不支持 auto 作为过渡起点或终点值，会导致过渡立即生效、无动画。必须用具体像素值（哪怕略大）替代 auto。

• 错误写法：max-height: 0; transition: max-height 0.25s; … &.open { max-height: auto; } → 无过渡
• 正确写法：max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; … &.open { max-height: 200px; }
• 200px 要大于所有选项总高度（含 padding/border），否则会截断；若选项动态增减，需 JS 重算并内联设置 max-height
• 更稳妥方案：用 opacity 和 transform: scaleY(0) → scaleY(1)，配合 transform-origin: top

无障碍与表单提交不能丢

自定义下拉容易忽略可访问性和表单集成，导致屏幕阅读器读不出、form.submit() 提交不到值。

• 原生 必须保留在 DOM 中、不设 display: none（可用 position: absolute; left: -9999px 移出视口）
  用户选中
  后，JS 必须同步更新
  .value 并触发 change 事件
• 按钮要加 aria-expanded，菜单加 role="listbox"，选项加 role="option" 和 aria-selected
• 键盘操作必须支持：Tab 进入、Space/Enter 展开、方向键高亮、Enter 确认、Escape 关闭