html - 如何防止 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 文档。

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