浏览器私有属性

Posted 2020-11-29 pythonywy

一.css中抬头

• ::-moz代表firefox浏览器私有属性
• ::-ms代表ie浏览器私有属性
• ::-webkit代表safari、chrome私有属性
• ::-o代表opera

二.常见的中私有属性拿chrome浏览器举例

::如果前面为空代码全局,如果前面有某个元素的css选择器代表改元素的对于内容

1.输入框

::-webkit-input-placeholder {}


//阻止input出现黄色背景
input:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: inset 0 0 0 1000px white !important;
}

清除input[type=”number”]侧边的箭头
input::-webkit-inner-spin-button { -webkit-appearance: none; }

2.禁用选择文本

* {
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

3.selection (下拉框)

::-webkit-selection {}

4.滚动条

::-webkit-scrollbar{} //滚动条宽度
::-webkit-scrollbar-thumb {}  //滑轨上滑块
::-webkit-scrollbar-button {}  //滑轨两头的监听按钮颜色
::-webkit-scrollbar-track {}   //定义滚动条轨道

-webkit-overflow-scrolling: touch; //允许独立的滚动区域和触摸回弹

//影藏滚动条
::-webkit-scrollbar {
    width: 0.01rem;  
}

//举例
/*定义滚动条样式*//*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    height: 0.01rem;
    background-color: #fff;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
    border-radius: 0.1rem;
    background-color: #fff;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 0.1rem;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #fff;
}