How can I prevent these 'selected' artifacts on HTML elements?

Question

Sometimes clicking isn't perfect, the mouse might move slightly and the button/elements end up with little 'selected' artifacts around them as seen here:

Of course clicking somewhere gets rid of it, but it's kind of annoying and looks crappy. Is there any way I can disable this so that the app seems more solid?

HTML/CSS:

<td id="controls">
      <span id="ccw" class="menuitem"></span>
      <span id="cw" class="menuitem"></span>
      <span id="zin" class="menuitem"></span>
      <span id="zout" class="menuitem"></span>
</td>

#cw{
   background-image:url('icons/rotatecw.png');
}

#ccw{
   background-image:url('icons/rotateccw.png');
}

#zin{
   background-image:url('icons/zoom_in.png');
   margin-top: 2px;
}

#zout{
   background-image:url('icons/zoom_out.png');
   margin-top: 2px;
}

.menuitem{
   background-repeat:no-repeat;
   width: 32px;
   height: 16px;
   display: inline-block;
}

Answer 1

In many browsers (except Opera and IE before IE10), you can use user-select with its various browser-prefixes. See MDN docu for details.

.controls {
    -moz-user-select: none;  
    -webkit-user-select: none;  
    -ms-user-select: none;  
    user-select: none;
}