經常使用瀏覽器私有屬性小記

把平常工做中使用率較高的記錄下來，若是想看更全的能夠看這個僞元素表單控件默認樣式重置與自定義大全

general

去除 select 表單右側箭頭

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
  }

/*for IE10*/
select::-ms-expand {
    display: none;
}

禁用選擇文本

這個就是光標由輸入改成普通箭頭

* {
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

/* 一種實踐，避免了非輸入類的user-select */
*:not(input):not(textarea) {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

更改選中默認顏色

::-webkit-selection {
    background: #d3d3d3; 
    color: #555;
}
::-moz-selection {
    background: #d3d3d3; 
    color: #555;
}
::selection {
    background: #d3d3d3; 
    color: #555;
}

https://jsfiddle.net/lyplba/9...

更改輸入框文字placeholder顏色

::-webkit-input-placeholder {
    color: purple;
}

::-moz-input-placeholder {
    color: purple;
}

::-ms-input-placeholder {
    color: purple;
}

::input-placeholder {
    color: purple;
}

https://jsfiddle.net/lyplba/y...

-webkit-

想更多瞭解webkit的私有屬性的，能夠來這裏，是由攜程UED收集維護的~

假滑動效果

http://3g.163.com/touch/news/...

恰好看到這樣一個提問，才發現-webkit-下有這樣的應用，直接把scrollbal隱藏掉，這樣就造成了僞滑動效果了，以前個人作法是外面再包一層overflow以防看到滾動條，不過這個的話是-webkit-下的呢~

::-webkit-scrollbar {
    display: none;
}

自定義input

當應用此樣式時，input都會失去瀏覽器默認表現，能夠自行定義

input { -webkit-appearance: none; }

Mac OS下的button

Mac OS下的button會優先使用默認的尺寸，即便你設置了，也是無效的，所以須要重置下

button { -webkit-appearance: button; } /* none亦可 */

清除input[type="number"]側邊的箭頭

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

去除點擊連接或者JavaScript可點元素時的高亮效果

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* 考慮到兼容問題，因此寫兩個上去，針對Android的 */
}

iOS 禁止或顯示系統默認菜單

當你觸摸並按住觸摸目標時候，禁止或顯示系統默認菜單。在iOS上，當你觸摸並按住觸摸的目標，好比一個連接，Safari瀏覽器將顯示連接有關的系統默認菜單。這個屬性可讓你禁用系統默認菜單。

主要用在img和a標籤上。

img, a {
    -webkit-touch-callout: none;
}

-webkit-overflow-scrolling

這個沒想好怎麼解釋，直接看範例

背景虛化

詳細介紹，請查看大漠博客

此屬性目前是在iOS 9 以及 Mac Safari下可見該效果，能夠做爲一種漸進加強的效果，提高體驗之用，效果很不錯，相較於-webkit-filter以及咱們傳統的增長mask或者overlay黑色背景層這種方式有很大的提高。
特別適合彈窗的背景層應用，顯示的更加之有層次感！

.backdrop {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
}

iOS10的一些更新

禁止縮放，meta再也不支持

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

須要監聽touchmove來實現禁止縮放

document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

相關連接：Disable viewport zooming iOS 10 safari?

-moz-

-ms-

去除側邊的叉叉

::-ms-clear { display: none; }
::-ms-reveal { display: none; }