Prevent text selection with quick button presses

Question

I have a slide show with divs for the "Previous" and "Next" buttons.

Inside the div there is a "<" or ">" character.

The problem is that when you quickly press the buttons to scroll through the images, the text is selected.

I tried some CSS tricks to prevent button text from being selected, but usually it ends up picking text further down the page. It is also not compatible with a browser without JS hackers.

If the div does not have a character in it, it works fine. I tried covering the div with a transparent div symbol, but it seems that as long as the symbol is under it, the text will be selected.

Any suggestion to prevent this? I would prefer the solution not to include javascript.

Thanks.

Answer 1

You could use a button, perhaps:

<button>&gt;</button> 

Answer 2

I believe this can be done with css, you should make it browser specific, so something like this should work if you also assign it to your <text

  -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;