Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to modify the browser scroll bar style". In the daily operation, I believe that many people have doubts about how to modify the browser scroll bar style. The editor consulted all kinds of data and sorted out a simple and easy-to-use operation method. I hope it will be helpful to answer the doubts about "how to modify the browser scroll bar style"! Next, please follow the editor to study!

{

Scrollbar-arrow-color: red; / * the color of the triangular arrow on the top and bottom buttons * /

Scrollbar-face-color: # CBCBCB; / * Color of the protruding part of the scroll bar * /

Scrollbar-3dlight-color: blue; / * the color of the bright edges of the scroll bar * /

Scrollbar-highlight-color: # 333; / * Color of the blank part of the scroll bar * /

Scrollbar-shadow-color: yellow; / * Color of scroll bar shadows * /

Scrollbar-darkshadow-color: green; / * Color of strong shadows on the scroll bar * /

Scrollbar-track-color: # eee; / * Scroll bar background color * /

Scrollbar-base-color: black; / * basic color of scroll bar * /

Cursor:url (mouse.cur); / * Custom personality mouse * /

/ * the above two items apply to: body, div, textarea, iframe*/

}

::-webkit-scrollbar {/ * the whole scroll bar * /

Width:10px

Margin-right:2px

}

::-webkit-scrollbar-button {/ * buttons at both ends of the scroll bar * /

Width:10px

Background-color: yellow

}

::-webkit-scrollbar:horizontal {

Height:10px

Margin-bottom:2px

}

::-webkit-scrollbar-track {/ * Outer orbit * /

Border-radius: 10px

}

::-webkit-scrollbar-track-piece {/ * inner track, scroll bar middle * /

Background-color: # 333333

Border-radius: 10px

}

::-webkit-scrollbar-thumb {/ * Slider * /

Width:10px

Border-radius: 5px

Background: # CBCBCB

}

::-webkit-scrollbar-corner {/ * Corner * /

Width: 10px

Background-color: red

}

::-webkit-scrollbar-thumb:hover {/ * Mouse into the slider * /

Background: # 909090

}

.demo {

Width: 400px

Height: 200px

Overflow: auto

}

At this point, the study on "how to modify the browser scroll bar style" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.