Question

我需要在我的网络应用中禁用所选文字的突出显示。我有充分的理由这样做，并知道这通常是一个坏主意。但无论如何我还是需要这样做。如果我需要使用CSS或JS来做这件事并不重要。我主要想要的是去除突出显示元素的蓝色。

Answer 1

您可以将CSS伪类选择器::selection和::-moz-selection用于Firefox。

例如：

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

::selection {
    background-color: transparent;
    color: #000;
}

.myclass::-moz-selection,
.myclass::selection { ... }

Answer 2

CSS3解决方案：

user-select: none;
-moz-user-select: none;

用户选择还有一个webkit前缀，但它使一些表单字段无法集中（可能是一个临时错误），所以你可以使用以下伪类来代替webkit：

element::selection

Answer 3

我相信你的意思是选择文字（例如，将鼠标拖过来突出显示）。如果是这样，这将取消IE和Mozilla中的选择操作：

window.onload = function() {
  if(document.all) {
      document.onselectstart = handleSelectAttempt;
  }
  document.onmousedown = handleSelectAttempt;
}

function handleSelectAttempt(e) {
    var sender = e && e.target || window.event.srcElement;
    if(isInForm(sender)) {
        if (window.event) {
            event.returnValue = false;
        }
        return false;
    }
    if (window.event) {
        event.returnValue = true;
    }
    return true;
}

function isInForm = function(element) {
    while (element.parentNode) {
        if (element.nodeName.ToUpperCase() == 'INPUT'
            || element.nodeName.ToUpperCase() == 'TEXTAREA') {
            return true;
        }
        if (!searchFor.parentNode) {
            return false;
        }
        searchFor = searchFor.parentNode;
    }
    return false;
}

Answer 4

我只是用*禁用所有元素的突出显示或轮廓突出显示

*{
 outline: none;
}

答案参考：How to remove focus border (outline) around text/input boxes? (Chrome)

Answer 5

我认为你正在寻找：focus伪类。试试这个：

input:focus {
  background-color: #f0f;
}

选择后，它会为您的输入提供漂亮的紫色/粉红色。

我不确定你必须设置哪些属性，但我认为你可以通过反复试验找出自己。

另请注意，突出显示或不显示是特定于浏览器的！

Answer 6

您的意思是当您将鼠标拖过它时突出显示文字吗？

最好的方法是使用名为:: selection的CSS3属性，但是CSS3还没有得到很好的支持。继续看看，否则也许有办法用Javascript做。

Answer 7

如果您的最终目标是使文本的复制和粘贴更加困难，那么Javascript和CSS不是正确的技术，因为您无法禁用浏览器的视图源功能。

其他一些想法（没有一个是理想的）：

一个java小程序（您可以控制文本的显示和检索）
在不同的浏览器插件中（flash，silverlight等）
服务器端创建的图像（性能不佳）

Answer 8

使用 selectstart 取消 preventDefault 事件：

window.addEventListener("selectstart", function(event) {
  event.preventDefault();
});


//one-line version
addEventListener("selectstart", event => event.preventDefault());

<h1>header</h1>
<p>paragraph</p>

如何在html或JS中禁用突出显示？

8 个答案: