5

I am having this html structure:

<ol class="linenums">
   <li class="L0">
      <code>
          <span><!-- piece of code--></span>
      </code>
   </li>
</ol>

Before the code, there are line numbers. By selecting the code, i use this css so that only the code is selected and not the linenumbers

ol.linenums li {
-user-select: none;
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
} 
ol.linenums li code {
-user-select: all;
-webkit-user-select: all; /* Chrome/Safari */        
-moz-user-select: all; /* Firefox */
-ms-user-select: all; /* IE10+ */
}

In every browser (IE, FF, Chrome, Opera), only the code is selected. Except in Safari; it is impossible to select anything at all.

How can i make this work for Safari?

  • Does this answer your question? [How to disable text selection highlighting](https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting) – Blowsie Jun 01 '22 at 08:14

1 Answers1

12

It seems that Safari needs this line also:

-webkit-user-select: text;

So it's working now with this code:

ol.linenums li code {
  user-select: all;
  -webkit-user-select: text; /* Safari fallback only */
  -webkit-user-select: all; /* Chrome/Safari */
  -moz-user-select: all; /* Firefox */
  -ms-user-select: all; /* IE10+ */
}
dube
  • 4,898
  • 2
  • 23
  • 41
  • 4
    For people like me, checking the current state: [caniuse](https://caniuse.com/mdn-css_properties_user-select) confirms that as of 2021 `-webkit-` prefix is still required on safari and edge and `all` is not supported – dube Jan 26 '21 at 10:03