CSS 小貼士彙整

Prevent auto zoom in iOS textfield

iOS 會將字型小於 16px 的 input field 強制放大，最快的方式是設定 input 為 font-size:16px 。

https://codepen.io/jakob-e/pen/yakBwJ?editors=1100

隱藏 Chrome 裡長按出現的藍色底色

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;

:focus {
    outline:0;
}

Removing The Dotted Outline

a {
    outline: none;
}

a:hover, a:active, a:focus {
    outline: none;
}

https://css-tricks.com/removing-the-dotted-outline/

停用選取文字

See the Pen user-select demo by iAN (@wuthula) on CodePen.

使用 CSS 將文字變為無法選取

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome all / Safari all */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox all */
    -ms-user-select: none;       /* IE 10+ */
    user-select: none;           /* 尚未普遍支援，期待未來 */
}

可以選取，但是隱藏 Highlight

.disable-highlight::-moz-selection,
.disable-highlight::selection {
  background:none;
  color:none; 
}

::-moz-selection,
::selection {
  background:none;
  color:none; 
}

參考連結：
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
https://css-tricks.com/almanac/properties/u/user-select/