Search code examples
csscross-browserhighlighttextselection

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?


Solution

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