阅读(3.1k) 书签赞(1) 我要纠错

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

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内核的浏览器

以上内容是否对您有帮助：

← 常用-webkit前缀属性合集

CSS实现单行、多行文本溢出显示省略号（…） →

写笔记

我要补充