更改滚动条样式

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

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

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

/* 定义滚动条渐增按扭的样式 */
::-webkit-scrollbar-button:end:increment {
  background: #143b9a url(‘images/scroll_cntrl_up.png‘) no-repeat center;
  background-size: 10px 10px;
  border-top: 0;
  width: 100%;
}

/* 定义滚动条渐减按扭的样式 */
::-webkit-scrollbar-button:start:decrement {
  background: #143b9a url(‘images/scroll_cntrl_dwn.png‘) no-repeat center;
  background-size: 10px 10px;
  width: 100%;
}

原文地址:https://www.cnblogs.com/ouchen0312/p/9796922.html

时间: 2024-10-12 04:21:10

更改滚动条样式的相关文章

常用 更改input的placeholder颜色和滚动条样式更改

/*更改input的placeholder颜色*/ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#CCCCCC; } input:-moz-placeholder, textarea:-moz-placeholder { color: #CCCCCC; } input::-moz-placeholder, textarea::-moz-placeholder { color: #CCC

eclipse 更改默认主题,重写默认滚动条样式(安装DevStyle主题插件)

1.点击Help->Eclipse Marktplace 2.弹出窗口输入: DevStyle 3.点击安装,重启eclipse 4.可以设置黑色和浅色主题,个人比较喜欢浅色,重点式滚动条样式变了. 原文地址:https://www.cnblogs.com/hzy168/p/10536699.html

【转】CSS3自定义滚动条样式

overflow介绍 定义:overflow 属性指定当它溢出其块级容器时,是否剪辑内容,渲染滚动条或显示内容. 属性值 overflow:visible //默认值.内容不会被修剪,超出内容会显示在元素框之外 overflow:hidden //内容会被修剪.超出内容被隐藏 overflow:scroll //内容会被修剪,浏览器会显示滚动条以便查看其余内容 overflow:auto //如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容. overflow:inherit //规定从该

网页滚动条样式知识

今天老板指出我做的网页的不足,说滚动条可以美化一下,我一听还有点纳闷,滚动条还可以变吗,第一次听说.后来去百度了下,果真有这方面东东,于是应用下来. webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. ::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条

JavaScript--动态更改CSS样式

JavaScript太强大了,虽然是弱语言,不过一点都不输于Java 可以自行设置随机数,来动态更改CSS样式,每一次都是不一样的感觉,这个小功能挺实用的 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript修改DOM节点CSS样式</title> <script type="text/javascript&qu

【CSS3】自定义滚动条样式 -webkit-scrollbar

好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scrollbar.html webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的.当然,兼容所有浏览器的滚动条样式目前是不存在的. 滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-t

chorme和IE下的滚动条样式修改

火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css&q

CSS自定义滚动条样式

相信很多人都遇到过在设计中自定义滚动条样式的情景,之前我都是努力说服设计师接受浏览器自带的滚动条样式,但是这样只能规避还是解决不了问题,最近在项目中遇到了,正好来总结一下.当然,兼容所有浏览器的滚动条样式目前是不存在的. IE下的滚动条样式 IE是最早提供滚动条的样式支持,好多年了,但是其它浏览器一直没有支持,IE独孤求败了. 这些样式规则很简单: scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立

overflow滚动条样式设置,ie和webkit内核

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 7 <style> 8 body{ 9 /*ie下修改滚动条样式,在webkit内核浏览器无效*/ 10 /*scrollbar-arrow-color: #f4ae21;三角箭头的颜色