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

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

发布于 2018-07-02 阅读 143 次 CSS CSS3

通用

♦ 去除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;
}
♦ 更改选中的默认颜色(值的是选中的文本区域)

预览:https://jsfiddle.net/lyplba/9yqdmpor/embedded/result/

::-webkit-selection {
    background: #d3d3d3; 
    color: #555;
}
::-moz-selection {
    background: #d3d3d3; 
    color: #555;
}
::selection {
    background: #d3d3d3; 
    color: #555;
}
♦ 更改placeholder颜色
::-webkit-input-placeholder {
    color: purple;
}

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

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

::input-placeholder {
    color: purple;
}
♦ 清除input[type="number"]侧边的箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

关于IOS

iOS10的一些更新

♦ 禁止缩放,meta不再支持
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

需要监听touchmove来实现禁止缩放(当然在微信的h5不受此影响)

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浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

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

IE

♦ 去除ie输入框侧边的×
::-ms-clear { display: none; }
::-ms-reveal { display: none; }