Prevent Safari from switching to text cursor when dragging mouse

Viewed 215

I'm working on a table where users will click on cells and drag the mouse across other cells to interact with it.

I want the mouse cursor to stay as 'pointer' the whole time the user is on the table. They should not be able to select any text.

Here's some example code to demonstrate:

<html>
  <head>
    <style> 
    td {
      user-select: none;
      -webkit-user-select: none;
      cursor: pointer;
    }
    </style>
  </head>
  <body>
    <table>
      <tr><td>Test</td><td>Test</td></tr>
      <tr><td>Test</td><td>Test</td></tr>
    </table>
  </body>
</html>

This works perfectly in Chrome - the cursor never changes from pointer regardless of how you interact with the cells using the mouse.

However, Safari always changes to the 'text' cursor as soon as you start dragging the mouse over the table (even though -webkit-user-select successfully prevents you from actually selecting text).

I've tried applying the styles above to the :active selector, as well as to parent elements (e.g. ) but no luck.

Does anyone know how to make this work in Safari?

0 Answers
Related