为什么 -webkit-user-select:text 不能与 safari 中的按钮一起使用？

Question

自从 23 年 8 月第一次报道以来，这一直困扰着我，而且我真的找不到任何权威的答案。

示例：https://jsfiddle.net/1t8Lng2j/

问题：用户无法选择

<button>

元素内的文本。仅限 Safari（使用 16/17.x 进行测试）。

-webkit-user-select:text

不会对 Safari 中的

<button>

元素执行任何操作。

解决方法：更改为锚点

<a>

标记使文本可选择，并且锚点标记按预期响应 css 属性。

所有其他浏览器都按预期运行，并且可以在按钮元素内选择文本，或者如果使用

none

属性，则可以阻止用户选择文本。

有谁知道为什么

-webkit-user-select

不适用于 Safari 中的按钮元素？

Answer 1

我有部分答案给你。

-webkit-user-select 确实适用于 Safari，只是 -webkit-user-select: text 在 Safari 上的行为与其他浏览器不同。

默认行为是，如果您在 Safari 上单击并拖动“within”按钮，则文本不可选。但是，如果您单击并拖动按钮的 outside，然后继续拖动到按钮上，则文本 is 可选择。如果 -webkit-user-select: 设置为

none

，则此行为不再起作用，并且文本根本不再可选，即使您开始拖动到元素之外也是如此。我想这是 Safari 选择的默认设置，因为在大多数情况下所需的行为是按钮文本不应该是可选的，除非您尝试复制页面的内容。就他们的观点而言，您可以找到要求完全相反的人的问题，他们想知道如何关闭按钮内的可选文本，因为他们不希望在用户只是尝试单击时看到所选文本的视觉效果按钮。

我怀疑这也与 pointer-events 在 Safari 上如何与按钮配合使用有关，因为如果

pointer-events

设置为

none

，则按钮选择的工作方式与以前一样，但从外部拖动时会选择

整个

文本，而不是用光标控制要选择的文本。锚标记的情况并非如此，禁用

pointer-events

可以正常选择超链接。 另一个值得注意的有趣的事情是，虽然锚标记如您所描述的那样是可选择的，但只有在没有

href

值的情况下才可以选择，除非

pointer-events

已关闭。如果您尝试将鼠标悬停在链接上时选择文本，它不会选择文本，就像按钮的行为一样。有时情况可能并非如此，因为您可以选择链接外部非常接近的位置来拖动到其上，但是如果添加填充，则很明显该行为与按钮相同（除了如何

pointer-events 

已处理）。这是一个 jsfiddle，您可以在其中看到其中一些概念的实际应用：

jsfiddle

Safari 有一个独特的功能，拖动链接会创建一个可拖动到其他应用程序的网站预览（用户可见）。也许禁用文本选择的默认行为是，当显示预览时，不会在下面选择文本，从而给用户造成视觉混乱。 这些只是我的猜测，但我认为值得注意的是 CSS 并没有被 Safari 忽略，它只是以不同的方式应用。

解决方案是：

Answer 2

问题是： 每个浏览器都有不同的默认 css 样式。 这就是为什么您会看到相同代码的差异。 如果您想查看详细信息，请打开 Safari 并进行 Inpesct，请阅读默认样式。

这是一些困难的情况，因为您使用 :hover :active 事件。

这些状态很难调试。

还有： 按钮不适用于文本选择。 如果您选择正确的元素，那么这很容易。如果您在某件事上遇到麻烦，通常是错误的选择。