如何防止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; 
}