ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

滚动条样式设置

2022-01-02 16:02:22  阅读:188  来源: 互联网

标签:background 样式 滚动条 color scrollbar 设置 10px webkit


{
  scrollbar-arrow-color: red; /*上下按钮上三角箭头的颜色*/
  scrollbar-face-color: #CBCBCB; /*滚动条凸出部分的颜色*/
  scrollbar-3dlight-color: blue; /*滚动条亮边的颜色*/
  scrollbar-highlight-color: #333; /*滚动条空白部分的颜色*/
  scrollbar-shadow-color: yellow; /*滚动条阴影的颜色*/
  scrollbar-darkshadow-color: green; /*滚动条强阴影的颜色*/
  scrollbar-track-color: #eee; /*滚动条背景颜色*/

  scrollbar-base-color: black; /*滚动条的基本颜色*/
  Cursor:url(mouse.cur); /*自定义个性鼠标*/
  /*以上2项适用与:body、div、textarea、iframe*/
}


::-webkit-scrollbar { /* 滚动条整体部分 */
  width:10px;
  margin-right:2px
}
::-webkit-scrollbar-button { /* 滚动条两端的按钮 */
  width:10px;
  background-color: yellow;
}
::-webkit-scrollbar:horizontal {
  height:10px;
  margin-bottom:2px
}
::-webkit-scrollbar-track { /* 外层轨道 */
  border-radius: 10px;
}
::-webkit-scrollbar-track-piece { /*内层轨道,滚动条中间部分 */
  background-color: #333333;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb { /* 滑块 */
  width:10px;
  border-radius: 5px;
  background: #CBCBCB;
}
::-webkit-scrollbar-corner { /* 边角 */
  width: 10px;
  background-color: red;
}
::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
  background: #909090;
}

标签:background,样式,滚动条,color,scrollbar,设置,10px,webkit
来源: https://www.cnblogs.com/cjxstart/p/15757595.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有