CSS3 changes the browser scroll bar style

CSS3 changes the browser scroll bar style

Note: This method is only applicable to webkit-based browsers.

The browser scroll bar is too wide and ugly, which affects daily development. What should I do?

The appearance of the scroll bar consists of two parts: 1. The overall slide of the scroll bar 2. The slider inside the scroll bar slide

In CSS, the scroll bar consists of 3 parts

name::-webkit-scrollbar //Overall scrollbar stylename::-webkit-scrollbar-track //Scrollbar trackname::-webkit-scrollbar-thumb //Scrollbar internal slider

Note: The above three are all pseudo-classes. Please change name to the element name you want to change.

For example: change the scroll bar style of the entire page

body::-webkit-scrollbar{ //First change the scroll bar width of body: 8px;

}

body::-webkit-scrollbar-track{//Change the scroll bar track color of the body background: rgb(200, 200, 200);

border-radius: 5px;

}

body::-webkit-scrollbar-thumb{//Finally, change the style of the body's scroll bar slide background: rgb(120, 120, 120);

border-radius: 5px;

}

◆ The right side shows the scroll bar style after the upper code is changed

◆ You can add background, transparency, border, rounded corners and other attributes to the style to make the browser more beautiful

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Several ways to encrypt and decrypt MySQL (summary)

>>:  Tutorial on deploying springboot package in linux environment using docker

Recommend

Solution to mysql server 5.5 connection failure

The solution to the problem that mysql cannot be ...

Six methods for nginx optimization

1. Optimize Nginx concurrency [root@proxy ~]# ab ...

JavaScript event delegation principle

Table of contents 1. What is event delegation? 2....

How to resize partitions in CentOS7

Yesterday, I helped someone install a system and ...

Detailed example of sorting function field() in MySQL

Preface In our daily development process, sorting...

Ubuntu 15.04 opens mysql remote port 3306

Ubuntu 15.04 opens MySQL remote port 3306. All th...

3 Tips You Must Know When Learning JavaScript

Table of contents 1. The magical extension operat...

JavaScript event capture bubbling and capture details

Table of contents 1. Event Flow 1. Concept 2. DOM...

Detailed tutorial on running multiple Springboot with Docker

Docker runs multiple Springboot First: Port mappi...

SQL implementation of LeetCode (175. Joining two tables)

[LeetCode] 175.Combine Two Tables Table: Person +...

Open the Windows server port (take port 8080 as an example)

What is a Port? The ports we usually refer to are...

CSS and HTML and front-end technology layer diagram

The relationship between Javascript and DOM is ve...