常用浏览器私有属性小记

把日常工作中使用率较高的记录下来，如果想看更全的可以看这个伪元素表单控件默认样式重置与自定义大全

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