Prevent text selection on rapid button clicks

Question

I have a slideshow with divs for "Previous" and "Next" buttons.

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

The problem is that when the buttons get clicked rapidly to scroll through the pictures, the text gets selected.

I tried a few CSS tricks to prevent the selecting of the buttons text but it usually just ends up selecting text further down the page. It's also not cross browser compatible without JS hacks.

If the div doesn't have a character in it, it works perfectly. I tried covering the div with the character with a transparent div, but it seems like as long as there's a character under it, text will get selected.

Any suggestion to prevent this? I'd rather the solution doesn't involve javascript.

Thanks.

Answer 1

You could use a button perhaps:

<button>&gt;</button>

Answer 2

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

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