CODEWITHSUNDEEP
csscross-browserhighlighttextselection
Manu
Manu

Reputation: 1470

How to fix disabled text highlighting?

Text highlighting is not working for all input fields in my asp.net web app with the latest versions of FireFox and Google Chrome (CTRL+A does not work either). I have not been able to test older versions yet. With Edge it is working properly.

Details: Double-clicking text or moving the mouse over the text while holding the left mouse button does not highlight the text. Surprisingly, dragging and copy/paste does work. So the text is actually selected but not highlighted.

I searched through my CSS for disable-select but could not find a single occurrence.

Any suggestions where else to look for a cause?

Upvotes: 1

Views: 3983

Answers (3)

epic
epic

Reputation: 111

This will happen eventually with gamer mouse or when using in gaming. Enabling autofire or other similar mouse function alteration will lead to this kind of behavior. There are few things you can to do to try turn off these: – examine you mouse for such function buttons – analyze mouse user manual for mouse function enhancements when pressing certain button combinations – install manufacturer mouse application if available – use the same game when you set these, to reverse them

Upvotes: 0

Manu
Manu

Reputation: 1470

What I found out: No occurrence of user-select: none in my CSS. But in Style.css I found:

::selection {
    text-shadow: none;
}

Which I changed to:

::selection {
    text-shadow: none;
    background: #f7ea54;
    /*or any other color*/
}

Now highlighting is working with all browsers! Why it does not work with the default setting, I could not figure out.

Upvotes: 0

Hristo Eftimov
Hristo Eftimov

Reputation: 15773

The property that you need to search for is not disable-select, it's user-select. For example

-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none;

The other property that you can look for is: ::selection for Chrome and ::-moz-selection for Firefox.

Also, you can change the default selection color just for the test:

::selection {
  background: #FF0000;
}
::-moz-selection {
  background: #FF0000;
}

Upvotes: 3

Related Questions