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

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

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

通用

♦ 去除select默认样式
  1. select {
  2. /*for firefox*/
  3. -moz-appearance: none;
  4. /*for chrome*/
  5. -webkit-appearance:none;
  6. }
  7. /*for IE10*/
  8. select::-ms-expand {
  9. display: none;
  10. }
♦ 禁止选中
  1. * {
  2. -webkit-user-select: none;
  3. -moz-user-select: none;
  4. -ms-user-select: none;
  5. user-select: none;
  6. }
  7. /* 一种实践,避免了非输入类的user-select */
  8. *:not(input):not(textarea) {
  9. -webkit-user-select: none;
  10. -webkit-touch-callout: none;
  11. }
♦ 更改选中的默认颜色(值的是选中的文本区域)

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

  1. ::-webkit-selection {
  2. background: #d3d3d3;
  3. color: #555;
  4. }
  5. ::-moz-selection {
  6. background: #d3d3d3;
  7. color: #555;
  8. }
  9. ::selection {
  10. background: #d3d3d3;
  11. color: #555;
  12. }
♦ 更改placeholder颜色
  1. ::-webkit-input-placeholder {
  2. color: purple;
  3. }
  4. ::-moz-input-placeholder {
  5. color: purple;
  6. }
  7. ::-ms-input-placeholder {
  8. color: purple;
  9. }
  10. ::input-placeholder {
  11. color: purple;
  12. }
♦ 清除input[type=”number”]侧边的箭头
  1. input::-webkit-outer-spin-button,
  2. input::-webkit-inner-spin-button { -webkit-appearance: none; }

关于IOS

iOS10的一些更新

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

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

  1. document.addEventListener('touchmove', function(event) {
  2. event = event.originalEvent || event;
  3. if(event.scale > 1) {
  4. event.preventDefault();
  5. }
  6. }, false);
♦ 禁止系统默认菜单

当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。
-webkit-touch-callout 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

  1. img, a {
  2. -webkit-touch-callout: none;
  3. }

IE

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