如何通过CSS禁用iframe双击后出现的高亮效果

解决方案 #

双击空白区域iframe高亮的效果本质是浏览器默认的文本选中行为覆盖到了iframe元素上，可通过以下CSS方案解决：

方案1：精准限制iframe区域不可选中（推荐，不影响页面其他区域文本选中功能） #

首先给iframe套一层父容器：

<div class="iframe-container">
  <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>
</div>

再添加对应CSS规则：

.iframe-container {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

方案2：全局清除选中高亮样式 #

如果不需要保留页面任何选中高亮效果，可直接设置全局选中样式为透明：

::selection {
  background-color: transparent;
}
::-moz-selection {
  background-color: transparent;
}

方案3：全局禁用文本选中 #

如果页面不需要支持用户选中任何文本内容，可直接全局设置不可选中：

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* 如果有需要支持选中的区域，单独给对应元素添加 `user-select: text` 覆盖即可 */

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