CSS如何改变滚动条的颜色样式粗细?

news/2024/11/8 16:24:14 标签: 前端, javascript, css

默认滚动条很丑怎么办?如何改版滚动条的粗细,颜色,让它更美观?CSS如何改变滚动条的粗细?

干货来了 

/* Webkit内核浏览器的滚动条样式 */
::-webkit-scrollbar {
  width: 4px; /* 设置滚动条的宽度 */
}

::-webkit-scrollbar-thumb {
  background-color: #0A2148; /* 设置滚动条的颜色 */
}

/* Firefox浏览器的滚动条样式 */
::-moz-scrollbar {
  width: 4px; /* 设置滚动条的宽度 */
}

::-moz-scrollbar-thumb {
  background-color: #0A2148; /* 设置滚动条的颜色 */
}

效果图

 

🧨🧨🧨 完结,撒花~ ,记得收藏 ~


http://www.niftyadmin.cn/n/5744146.html

相关文章

【大数据学习 | kafka高级部分】kafka的kraft集群

首先我们分析一下zookeeper在kafka中的作用 zookeeper可以实现controller的选举,并且记录topic和partition的元数据信息,帮助多个broker同步数据信息。 在新版本中的kraft模式中可以这个管理和选举可以用kafka自己完成,而不再依赖zookeeper。…

Docker与Cgroups资源控制实战

Docker与Cgroups资源控制实战 一、Cgroups简介 Cgroups(Control Groups)是Linux内核提供的一种机制,用于将进程按组进行管理,并限制和统计这些进程的资源使用情况。这些资源包括CPU、内存、存储、网络等。通过Cgroups&#xff0…

【NOIP普及组】质因数分解

【NOIP普及组】质因数分解 C语言代码C代码Java代码Python代码 💐The Begin💐点点关注,收藏不迷路💐 已知正整数 n 是两个不同的质数的乘积,试求出较大的那个质数。 输入 输入只有一行,包含一个正整数…

React.lazy() 懒加载

概要 React.lazy() 是 React 16.6 引入的一个功能,用于实现代码分割(code splitting)。它允许你懒加载组件,即在需要时才加载组件,而不是在应用初始加载时就加载所有组件。这种方法可以显著提高应用的性能&#xff0c…

基于Springboot+Vue的网上课程学习系统(含源码数据库)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 该系统…

植物神经功能紊乱?这些维生素或许能帮到你!

植物神经功能紊乱,这个听起来有些陌生的名词,实际上却是一种常见的内脏功能失调综合征。它可能与心理、遗传、疾病等多种因素有关,表现为多个系统的症状,如睡眠障碍、心悸、头痛、胸闷、多汗等,严重影响了患者的生活质…

C语言实现数据结构之堆

文章目录 堆一. 树概念及结构1. 树的概念2. 树的相关概念3. 树的表示4. 树在实际中的运用(表示文件系统的目录树结构) 二. 二叉树概念及结构1. 概念2. 特殊的二叉树3. 二叉树的性质4. 二叉树的存储结构 三. 二叉树的顺序结构及实现1. 二叉树的顺序结构2.…

linux rocky 9.4部署和管理docker harbor私有源

文章目录 Harbor简介安装Harbor技术细节1.安装系统(略),设置主机名和IP2.安装docker3.安装docker-compose4.安装Harbor私有源仓库5 测试登录1.本机登录2.客户端登录Harbor服务器配置docker源1. 下载镜像2.把镜像上传到Harbor私有仓库源3.客户端下载镜像,并且启动容器linux …