对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?

我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。

有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?


当前回答

查看我的解决方案没有JavaScript:

吉普赛

首頁 〉外文書 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學 〉文學

使用我的技术的Popup菜单: http://jsfiddle.net/y4Lac/2/

其他回答

直到 CSS 3 的用户选择属性成为可用的,基于 Gecko 的浏览器支持您已经发现的 -moz-用户选择属性. WebKit 和 Blink 的浏览器支持 -webkit-用户选择属性。

当然,这在不使用 Gecko 发射引擎的浏览器中不支持。

没有“标准”符合的快速和简单的方式来做到这一点;使用JavaScript是一个选项。

真正的问题是,为什么你想用户无法突出并假设复制和粘贴某些元素?我没有遇到一个时候,我不想让用户突出我的网站的一部分。

唯一的地方我可以看到这是有用的,如果你有表单的按钮不应该复制和保留,如果一个用户复制和保留网站。

第一個方法:(完全無情):

.no-select::selection, .no-select *::selection {
  background-color: Transparent;
}

.no-select { /* Sometimes I add this too. */
  cursor: default;
}
<span>RixTheTyrunt is da best!</span>
<br>
<span class="no-select">RixTheTyrunt is da best!</span>

狙击:

.no-select::selection,.no-select *::selection {背景颜色:透明; }.no-select { /* 有时我也添加了这个。 */ cursor:默认; } <span>RixTheTyrunt是最好的!</span> <br> <span class="no-select">RixTheTyrunt是最好的!</span>

第二种方法(不含)

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

狙击:

.no-select { 用户选择: 无; -moz-用户选择: 无; -webkit-用户选择: 无; } <span>RixTheTyrunt 是最好的!</span> <br> <span class="no-select">RixTheTyrunt 是最好的!</span>

首先,解决问题,然后写代码,约翰·约翰逊

我从CSS-Tricks网站上学到了。

user-select: none;

这也是:

::selection {
    background-color: transparent;
}

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

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

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

关于 WebKit 的文章:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

我在 CardFlip 例子中发现了它。