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

17 篇文章 0 订阅
16 篇文章 0 订阅
  • 更改输入框文字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内核的浏览器




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值