如何防止HTML元素上的这些“选定”工件？

Question

有时点击不完美，鼠标可能会略微移动，按钮/元素最终会在周围显示很少的“选定”工件：

当然点击某处可以摆脱它，但它有点烦人，看起来很糟糕。有什么方法可以禁用它，以便应用程序看起来更稳固吗？

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

在许多浏览器中（IE10之前的Opera和IE除外），您可以使用user-select及其各种浏览器前缀。有关详细信息，请参阅MDN docu。

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