为何-webkit-user-select:text在Safari的<button>元素中无效？

核心原因 #

Safari对原生<button>这类表单交互控件存在内核层面的默认行为限制：为避免用户点击按钮时误选文本干扰操作，浏览器默认禁止选中<button>内的文本，且这种限制优先级高于普通自定义CSS，导致-webkit-user-select:text无法生效。

问题验证 #

• 仅出现在Safari 16/17.x版本，其他主流浏览器中<button>文本可正常选中，-webkit-user-select:none也能按预期阻止选中
• 替换为<a>标签后-webkit-user-select:text可正常生效，因为<a>不属于原生表单控件，无此类强制限制

替代解决方案 #

• 模拟按钮控件
  用<div>模拟按钮，添加可访问性属性以保证交互合规：

  <div role="button" tabindex="0" class="custom-btn">可选中的按钮文本</div>
  

  配套CSS：

  .custom-btn {
    -webkit-user-select: text;
    user-select: text;
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
  }
  

  需额外添加JavaScript处理Enter/空格键触发点击，确保键盘交互正常。

• 嵌套可选中元素
  在<button>内部嵌套<span>，将选中规则应用到嵌套元素上：

  <button style="user-select: none;">
    <span style="-webkit-user-select: text; user-select: text;">可选中的按钮文本</span>
  </button>
  

  该方法保留了<button>的原生交互特性，且在多数Safari版本中有效。

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