前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浏览器私有属性

浏览器私有属性

作者头像
小小咸鱼YwY
发布2020-06-19 15:36:48
7710
发布2020-06-19 15:36:48
举报
文章被收录于专栏:python-爬虫python-爬虫

一.css中抬头

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

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

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

1.输入框

代码语言:javascript
复制
::-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.禁用选择文本

代码语言:javascript
复制
* {
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

3.selection (下拉框)

代码语言:javascript
复制
::selection
{
xxxxx
}

::-moz-selection
{
xxxx
}

IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

Firefox 支持替代的 ::-moz-selection。

4.滚动条

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

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

//影藏滚动条
::-webkit-scrollbar {
    width: 0px;  
}
代码语言:javascript
复制
//举例
/*定义滚动条样式*//*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}

5.input-range

代码语言:javascript
复制
::-webkit-slider-thumb{}  //一定要配合::-webkit-slider-runnable-track使用,否则会没有效果.......
里面参数和滑动块类似

6.字体描边

-webkit-text-strokeCSS属性为文本字符指定了颜色 . 它是-webkit-text-stroke-width-webkit-text-stroke-color属性的缩写.

代码语言:javascript
复制
/* 全局设置 */
/* 宽度和颜色属性 */
-webkit-text-stroke: <length> <color>;
-webkit-text-stroke-width:绝对<length>
-webkit-text-stroke-color:<color>
-webkit-text-stroke: 1px red;

/* 全局属性 */
/* 默认设置 */
-webkit-text-stroke: inherit;
-webkit-text-stroke: initial;
-webkit-text-stroke: unset;


/* 局部设置 */
div {
    -webkit-text-stroke: <length> <color>;
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-11-10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一.css中抬头
  • 二.常见的中私有属性拿chrome浏览器举例
    • 1.输入框
      • 2.禁用选择文本
        • 3.selection (下拉框)
          • 4.滚动条
            • 5.input-range
              • 6.字体描边
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档