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
– zombat, Commented Aug 3, 2009 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
– Russ Cam, Commented Aug 3, 2009 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
– Nosredna, Commented Aug 3, 2009 at 20:32
Browsers usually select with a gray or black background, so do you mean the coloring of links? — Nosredna
– Nosredna, Commented Aug 3, 2009 at 20:37

Erv · Accepted Answer · 2019-03-26 20:35:53Z

25

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, 2019 at 20:35

user554180

answered Aug 3, 2009 at 20:48

Erv

4153 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Erv Over a year ago

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.

space_balls Over a year ago

can you just use this: stackoverflow.com/questions/826782/…

zrooda · Accepted Answer · 2012-04-04 13:53:26Z

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 4, 2012 at 13:53

answered Apr 4, 2012 at 13:35

zrooda

3,6991 gold badge33 silver badges41 bronze badges

Comments

Rex M · Accepted Answer · 2009-08-03 20:59:18Z

5

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;
}

edited Aug 3, 2009 at 20:59

answered Aug 3, 2009 at 20:30

Rex M

144k34 gold badges292 silver badges315 bronze badges

2 Comments

John Stimac Over a year ago

thats what i want, but does it stop inputs from being selected?

Rex M Over a year ago

@jcubed probably. You'll need to make sure you're not inside an input or textarea before aborting the event bubbling. See my edit.

Michael Jay Castillo · Accepted Answer · 2020-06-01 14:41:07Z

3

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 1, 2020 at 14:41

Michael Jay Castillo

311 bronze badge

Comments

luek baja · Accepted Answer · 2021-01-13 02:49:01Z

2

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>

answered Jan 13, 2021 at 2:49

luek baja

1,71215 silver badges32 bronze badges

Comments

Erik van Brakel · Accepted Answer · 2009-08-03 20:31:13Z

0

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!

answered Aug 3, 2009 at 20:31

Erik van Brakel

23.9k3 gold badges54 silver badges66 bronze badges

Comments

Karl · Accepted Answer · 2009-08-03 20:41:43Z

0

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.

answered Aug 3, 2009 at 20:41

Karl

6,1755 gold badges33 silver badges39 bronze badges

Comments

Josef Pfleger · Accepted Answer · 2009-08-03 20:42:31Z

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 3, 2009 at 20:42

Josef Pfleger

74.6k16 gold badges99 silver badges100 bronze badges

2 Comments

John Stimac Over a year ago

no, i just want to not show the blue stuff that most browsers use to show highlight

Eric Rini Over a year ago

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.

Collectives™ on Stack Overflow

How can I disable highlighting in html or JS?

8 Answers 8

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related