css3修改浏览器scroll默认样式

whjin 发布于2019-04-23 11:47 / 985人阅读

摘要：最近公司的新项目。前端样式采用的蚂蚁金服的。比较喜欢一类简约大方的前端样式库。但是在页面布局上包括一些选择框。默认的样式简直丑爆。遂度娘资料，通过进行修改。

最近公司的新项目。前端样式采用的蚂蚁金服的antDesign。

比较喜欢antDesign、BootStrap一类简约大方的前端样式库。

但是在页面布局上、包括一些选择框。默认的scroll样式简直丑爆。

遂度娘资料，通过css3进行修改。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 4px;  
    height: 4px;  
    background-color: #F5F5F5;  
}

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

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

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-track-piece 内层轨道
::-webkit-scroll-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

GPU云服务器云服务器默认样式浏览器对和css3的支持修改样式修改默认端口自

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1162.html

修改radio、checkbox和select默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然已经不能满足需求。兼容更低版本浏览器的样式修改最后附上演示链接修改和默认样式现在前端页面效果日益丰富，默认的input组件样式显然已经不能满足需求。趁着这次开发的页面中有这方面的需求，在这里整理一下修改radio、checkbox、select的方法。 radio and checkbox 修改radio的默认样式有两种常用的方法纯CSS...

mumumu 2019-08-21 10:50 评论0 收藏0
CSS题目及答案整理

摘要：解决方案为加上使其形成，根据规则第六条，计算高度时就会计算的元素的高度，达到清除浮动影响的效果。并为这个外层元素设置，使其形成。生成相对定位的元素，相对于其正常位置进行定位。它的所有子元素自动成为容器成员，称为项目，简称项目。原文链接在这里 CSS 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有两种， IE 盒子模型（相当于box-sizing: bor...

lijy91 2019-08-29 12:34 评论0 收藏0
[总结]CSS/CSS3常用样式与web移动端资源

摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码：第一段文字选中效果第二段文字选中效果 css代码： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 评论0 收藏0
CSS相关文章

摘要：如何用获取虚拟键盘高度前端早读课月号早读文章由汤谷投稿分享。大杀器和把动画转换成原生动画初来乍到，本文搬运自我月份在知乎发的文章。前端面试之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面试中经常被问到的。如何用 js 获取虚拟键盘高度？-前端早读课 9月7号早读文章由@汤谷投稿分享。正文从这开始～这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题...

FrozenMap 2019-08-29 14:21 评论0 收藏0
CSS3学习笔记

摘要：在动画过程中，您能够多次改变这套样式。以百分比来规定改变发生的时间，或者通过关键词和，等价于和。为了获得最佳的浏览器支持，您应该始终定义和选择器。注释请使用动画属性来控制动画的外观，同时将动画与选择器绑定。CSS3 被划分为模块其中最重要的 CSS3 新增实用模块包括：背景和边框文本效果 2D/3D 转换动画多列布局用户界面 CSS3 边框: 　　用于创建圆角 border...

wenshi11019 2019-04-23 13:17 评论0 收藏0