经常使用浏览器私有属性小记

把平常工做中使用率较高的记录下来，若是想看更全的能够看这个伪元素表单控件默认样式重置与自定义大全

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; }