HTML select不支持readonly，需用disabled加隐藏域或pointer-events: none；title仅纯文本提示且移动端无效，推荐disabled+span title或p模拟下拉实现只读与提示。

HTML下拉框怎样设只读提示_HTML下拉框加title显悬停提示【提示】 第1张

HTML下拉框不能用 readonly，得用 disabled 或 pointer-events: none

HTML 的 元素不支持 readonly 属性——设了也没效果，浏览器直接忽略。如果只是想让用户看到选项但无法更改，又希望表单提交时仍携带该值，disabled 会阻止提交（值不会发到后端），这时得换思路：

  • 用 disabled + 额外隐藏域（）存当前选中值
  • 用 CSS 禁用交互但保留表单行为：
     或每个  上都生效：
    注意：title 提示内容无法换行、不能加图标、不支持点击交互，且在移动端多数浏览器不触发（iOS Safari 默认禁用）；若需更可靠提示，得用 JS + aria-describedby 或第三方 tooltip 库。
    

    真正“只读+提示”组合方案：禁用交互 + 自定义提示文案
    

    常见需求其实是「显示当前值、不可改、鼠标悬停有说明」。这时推荐分离职责：
    

    立即学习“前端免费学习笔记（深入）”；
    
							

      

    • 用  显示当前选项（视觉锁定）
      • 

    • 旁边放一个 北京市 作为只读展示和提示载体
      • 

    • 或用 
       模拟下拉外观，配合 CSS 下拉箭头背景图，完全可控
      这样既规避了 select 的语义限制，又能自由绑定 title、data-* 属性或 JS tooltip。
      

      
移动端适配要特别注意 title 和禁用逻辑
      

      在 iOS 和部分安卓 WebView 中：
      

        

      • 
title 悬停几乎无效（没 hover 概念），用户长按也不会弹出
        • 

      • 
disabled 的  可能仍唤起原生选择器（Safari 旧版本存在）
        • 

      • 用 pointer-events: none 在移动端更稳定，但需测试是否影响 VoiceOver 等读屏器识别
        • 

      

      如果必须兼顾无障碍，优先用 aria-live + aria-label 补充说明，而非依赖 title。
      

      

      •