Cross browser way to hide selection display

Question

I am making a browser based javascript game. As such, within the game there is nowhere users need to copy/paste text. However there are many places where the user needs to click and drag to make selections in the game.

Within the game there are many cells, internally just normal table cells, with a non breaking space to stop them collapsing in firefox (I could stop the collapsing in IE, Safari and Opera with CSS, but for some reason it didn't work in firefox so I resorted to non breaking spaces), with either a solid background colour or a background image.

As the player drags a selection across them, the game highlights the cells by changing the background colour. However, the browser also highlights the non breaking spaces, leaving grey rectangles across some of the cell.

Also the browser uses a different way to determine what is selected than the game.

e.g. in a 5 x 5 square, if the user selects (1, 1) to (3, 3), the game highlights the following selection:

|   |   |   |   |   |
|   | X | X | X |   |
|   | X | X | X |   |
|   | X | X | X |   |
|   |   |   |   |   |

but the browser highlights the non breaking spaces in the following:

|   |   |   |   |   |
|   |   | X | X | X |
| X | X | X | X | X |
| X | X | X | X |   |
|   |   |   |   |   |

Is there any way to stop the browser selection styling showing through? At the very least in firefox and Chrome, but preferably cross browser.

Answer 1

For firefox you can add the css style: (mozilla guide)

-moz-user-select: none

For chrome and safari: (couldn't find a reliable source yet)

-khtml-user-select:none

If you prefer a javascript solution, here is the one I found from a previous answer:

<div onselectstart="return false">some stuff</div>