How can I disable highlighting in html or JS?

Question

I need to disable the highlighting of selected text on my web app. I have a good reason for doing this and know that this is generally a bad idea. But I need to do it anyway. It doesn't matter if I need to use CSS or JS to do it. What I'm mainly going for is the removal of the blue color given to highlighted elements.

This question can't really be answered in it's current form. What is causing the highlighting? Are you talking about keyword highlighting, or something else, like rollovers? We need more information. — zombat, Aug 03 '09 at 20:30
what do you mean exactly by highlighting? When I left-click and hold the mouse button and drag over the text, it gets highlighted. Is that what you mean? — Russ Cam, Aug 03 '09 at 20:31
Do you mean selection? Like when you drag over text? There are several ways to do it in IE and different ways to do it in other browsers. — Nosredna, Aug 03 '09 at 20:32
Browsers usually select with a gray or black background, so do you mean the coloring of links? — Nosredna, Aug 03 '09 at 20:37

score 24 · Accepted Answer · edited Mar 26 '19 at 20:35

24

You can use the CSS pseudo class selector ::selection and ::-moz-selection for Firefox.

For example:

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

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

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

edited Mar 26 '19 at 20:35

answered Aug 03 '09 at 20:48

Erv

405
2
6

7

It does not stop selection (if you need it use at least javascript -> i use jquery: window.onload = function() { document.onselectstart = function() {return false;} // ie document.onmousedown = function() {return false;} // mozilla } U might need extra script to cancel keyboard shortcuts like in Windows CTRL+A. But then again there realy is no reliable way to stop computer "experts" from copying something they see on their computer. – Erv Aug 04 '09 at 21:53
2

can you just use this: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting – space_balls Sep 30 '11 at 06:07

zrooda · Answer 2 · 2012-04-04T13:53:26.363

16

The CSS3 solution:

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

There is also a webkit prefix for the user-select, but it makes some form fields impossible to focus (could be a temporary bug), so you could go with the following pseudo-class for webkit instead:

element::selection

edited Apr 04 '12 at 13:53

answered Apr 04 '12 at 13:35

zrooda

3,610
1
30
38

Rex M · Answer 3 · 2009-08-03T20:59:18.477

I believe what you mean is selecting text (e.g. dragging the mouse across to highlight). If so, this will cancel the selection action in IE and 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;
}

thats what i want, but does it stop inputs from being selected? — John Stimac, Aug 03 '09 at 20:42
@jcubed probably. You'll need to make sure you're not inside an input or textarea before aborting the event bubbling. See my edit. — Rex M, Aug 03 '09 at 20:54

score 2 · Answer 4 · answered Jun 01 '20 at 14:41

2

I just used * to disable highlighting or outline highlight for all elements

*{
 outline: none;
}

answer reference: How to remove focus border (outline) around text/input boxes? (Chrome)

answered Jun 01 '20 at 14:41

Michael Jay Castillo

21
1

score 2 · Answer 5 · answered Jan 13 '21 at 02:49

Cancel the selectstart event using preventDefault:

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


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

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

score 0 · Answer 6 · answered Aug 03 '09 at 20:31

I think you're looking for the :focus pseudo class. Try this:

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

It will give your input a pretty purple/pink color when selected.

I'm not sure which properties you have to (un)set, but I think you can find out yourself using trial and error.

Also note that the highlighting or absence thereof is browser specific!

score 0 · Answer 7 · answered Aug 03 '09 at 20:41

Do you mean highlighting of text when you drag your mouse over it?

Best way to do this would be using a CSS3 property called ::selection, however being CSS3 it isn't well-supported yet. Go ahead and look that up, otherwise maybe there's a way to do it with Javascript.

score 0 · Answer 8 · answered Aug 03 '09 at 20:42

0

If your ultimate goal is to make copy and paste of text more difficult, Javascript and CSS are not the right technology because you cannot disable the browser's view-source function.

Some other ideas (none of them ideal):

a java applet (you control both display and retrieval of text)
same in a different browser plugin (flash, silverlight, etc.)
server-side created images (poor performance)

answered Aug 03 '09 at 20:42

Josef Pfleger

74,165
16
97
99

no, i just want to not show the blue stuff that most browsers use to show highlight – John Stimac Aug 03 '09 at 20:46
I agree that it is a questionable assumption to treat all parts of a page as if it were selectable text. Especially when implementing drag and drop user interface widgets. – Eric Rini Sep 10 '14 at 23:54

How can I disable highlighting in html or JS?

8 Answers8

Linked