Prevent text highlight when click

Question

I have a input field with plus minus sign to raise/lower the number in it. Looks like this:

<a onclick="less()">-</a>
<input type="text" text-input">
<a onclick="more()">+</a>

How can I disable/prevent the select/highlight of the +/- text when I click to raise the numbers?

I'm looking for a solution that works cross browser. Thanks

Answer 1

Depending of what versions of browsers you have to support, you can try using css property user-select to none. Here you have an example of such implementation http://css-tricks.com/almanac/properties/u/user-select/

Answer 2

you can use css ::selection

::selection {
  background: none;
}
::-moz-selection {
  background: none;
}
::-webkit-selection {
  background: none;
}