常用浏览器私有属性小技巧

2018-06-19 16:31 更新
  • 更改输入框文字placeholder颜色

::-webkit-input-placeholder { color: orange; } ::-moz-input-placeholder { color:orange; } ::-ms-input-placeholder { color: orange; } ::input-placeholder { color: orange; }

  • 禁用选择文本

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


  • 美化或隐藏滚动条
类似今日头条移动端的头部tab滑动越来越多了,我们除了使用iscroll等插件外,我们还可以使用overflow-x:auto,但是都会看到滚动条,特别影响美观,不过,我们现在可以保留滚动,又可以隐藏滚动条

::-webkit-scrollbar { //滚动条宽度 width:0;

/* or */

display:none; } ::-webkit-scrollbar-thumb { //滑轨上滑块 background-color: #e78170 !important; }

::-webkit-scrollbar-button { //滑轨两头的监听按钮颜色 background-color: #e78170; }

如果你要隐藏某个div的滚动条,你可以这样:

div::-webkit-scrollbar { width:0; /* or */ display:none; }


  • 阻止input出现黄色背景
在chrome浏览器中,当我们点击了保存密码后,再次进入页面时,表单会出现黄色背景,会影响整体美观,我们可以加上下面的代码,阻止input出现黄色背景

input:-webkit-autofill { background-color: #fff !important; -webkit-box-shadow: inset 0 0 0 1000px white !important; }


  • 清除input[type="number"]侧边的箭头

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }


  • iOS 禁止或显示系统默认菜单

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

一般用在img和a上

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


  • 去除点击链接或者JavaScript可点元素时的高亮效果

a { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* 考虑到兼容问题,所以写两个上去,针对Android的 */ }


  • 弹性滚动

-webkit-overflow-scrolling: touch;

允许独立的滚动区域和触摸回弹,主要兼容webkit内核的浏览器




以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号