当前位置:首页 > 常用浏览器私有属性小记-转载

常用浏览器私有属性小记-转载

发布于 2018-07-02 阅读 431 次 CSS CSS3
###通用 #####♦ 去除select默认样式 ```css select { /*for firefox*/ -moz-appearance: none; /*for chrome*/ -webkit-appearance:none; } /*for IE10*/ select::-ms-expand { display: none; } ``` #####♦ 禁止选中 ```css * { -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; } ``` #####♦ 更改选中的默认颜色(值的是选中的文本区域) 预览:https://jsfiddle.net/lyplba/9yqdmpor/embedded/result/ ```css ::-webkit-selection { background: #d3d3d3; color: #555; } ::-moz-selection { background: #d3d3d3; color: #555; } ::selection { background: #d3d3d3; color: #555; } ``` #####♦ 更改placeholder颜色 ```css ::-webkit-input-placeholder { color: purple; } ::-moz-input-placeholder { color: purple; } ::-ms-input-placeholder { color: purple; } ::input-placeholder { color: purple; } ``` #####♦ 清除input[type="number"]侧边的箭头 ```css input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } ``` ###关于IOS iOS10的一些更新 #####♦ 禁止缩放,meta不再支持 ```html ``` 需要监听`touchmove`来实现禁止缩放(当然在微信的h5不受此影响) ```javascript document.addEventListener('touchmove', function(event) { event = event.originalEvent || event; if(event.scale > 1) { event.preventDefault(); } }, false); ``` #####♦ 禁止系统默认菜单 当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。 -webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。 ```css img, a { -webkit-touch-callout: none; } ``` ###IE #####♦ 去除ie输入框侧边的× ```css ::-ms-clear { display: none; } ::-ms-reveal { display: none; } ```