CSS 點擊時不要反白、不允許選取

雖然大部分的網頁設計都會想設計反白效果，但有些元素仍會需要用到禁止反白，通常是因為美觀的關係，例如手機點選某些元素時經常會出現反白的情況，使得整體美感失去平衡，這時就可以用CSS來避免這樣的情況。

CSS

user-select:none; /* standard syntax */
-webkit-user-select:none; /* for Chrome、Safari */
-moz-user-select:none;  /* for Mozilla、Firefox */

user-select的意思是使用者選取，給它none值就是不讓使用者選取，無法選取也就無法反白了。

實際效果

See the Pen Untitled by kumo (@kumo-tw) on CodePen.

延伸閱讀

• 色碼表即時調色（線上工具）
• CSS 區塊元素（div）垂直置中的方法
• CSS class 與 style 差異
• CSS 背景模糊（失焦效果）backdrop-filter
• CSS 滑鼠經過時顯示懸浮文字