如何禁用 iframe 突出显示答案

【问题标题】：How to disable iframe from being highlighted如何禁用 iframe 突出显示
【发布时间】：2021-11-19 02:29:31
【问题描述】：

当我双击白色背景时，iframe 会突出显示，如何通过 css 禁用它？

要重现，双击白色背景，您将看到 iframe 被突出显示。

如何通过 css 禁用它？

<iframe width="642" height="361" src="https://www.youtube.com/embed/M7lc1UVf-VE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

【问题讨论】：

iframe {user-select: none;}developer.mozilla.org/en-US/docs/Web/CSS/user-select

标签： css iframe

【解决方案1】：

在 iframe 上使用 user-select: none;。

<!DOCTYPE html>

<head>
  <style>
    .video-frame {
      user-select: none;
    }
  </style>

  <body>

    <iframe class="video-frame" width="642" height="361" src="https://www.youtube.com/embed/M7lc1UVf-VE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  </body>

  </html>

几乎所有浏览器都支持：https://caniuse.com/?search=user-select
有关更多信息，请参阅规范：https://www.w3.org/TR/2021/WD-css-ui-4-20210316/#propdef-user-select

【讨论】：

为什么不用这个呢？ iframe::selection { 背景：无； }
好问题！使用您提到的方法，您仍然允许用户选择元素，只是您隐藏了选择提示。并且用户仍然可以在 elment 上执行ctrl+c。如果你查看剪贴板，就会有一个对象。在 Windows 上 window+v 将显示剪贴板的内容。另一方面user-select: none; 完全禁用选择过程，用户不能进行复制。如果您在文本元素上尝试这些方法，您会很快注意到差异。

【解决方案2】：

使用user-select 并将其设置为none 为避免兼容性问题，请添加供应商前缀： -webkit--ms--moz--o-

    .video-frame {
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
    }

【讨论】：

-os-user-select：无；那个有什么用途？是你编的吗？
*-o- 歌剧