How Can I Disable Highlighting In Html Or Js?

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 do

Solution 1:

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 { ... }

Solution 2:

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

Solution 3:

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

functionhandleSelectAttempt(e) {
    var sender = e && e.target || window.event.srcElement;
    if(isInForm(sender)) {
        if (window.event) {
            event.returnValue = false;
        }
        returnfalse;
    }
    if (window.event) {
        event.returnValue = true;
    }
    returntrue;
}

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

Solution 4:

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)

Solution 5:

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!