CSS Style Scrollbar

CSS Tutorial » CSS Style Scrollbar

With webkit browsers, we can use this pseudo elements to customize the browser's scrollbar:

::-webkit-scrollbar: the scrollbar.
::-webkit-scrollbar-button: the buttons on scrollbar.
::-webkit-scrollbar-track: the track of the scrollbar.
::-webkit-scrollbar-thumb: the draggable scrolling handle.
::-webkit-scrollbar-corner: horizontal and vertical scrollbars meet - bottom corner of the scrollbar
::-webkit-scrollbar-track-piece: the track NOT covered by the handle.
::-webkit-resizer: the draggable resizing handle that appears at the bottom corner of some elements.

We can add Style text as:
Internal - by using a <style> element in the <head> section
External & External - by using an external CSS file as style.css

Note: Scrollbars - not supported in Firefox and IE/Edge.

How to create Style Custom Scrollbar - examples

Webkit browsers, Chrome, opera and Safari, supports non-standard ::-webkit-scrollbar You can try to execute the following code to change Custom Scrollbar on this page.

Example:

Example 1, How to create Style Custom Scrollbar - examples:

  <!DOCTYPE html>

  <html>

  <head>

  <title>create Style Custom Scrollbar - examples - example</title>

  <style>

  /* width */

  ::-webkit-scrollbar {
width: 16px;

  }

  
/* Track */

  ::-webkit-scrollbar-track{

background: #66FF99;

  }

  
/* Handle */

  ::-webkit-scrollbar-thumb {

background: #007927;

  }

  
/* Handle on hover */

  ::-webkit-scrollbar-thumb:hover {

background: #003C13;
}

  </style>

  </head>

  <body>

     <h1>CSS create Style Custom Scrollbar</h1>

     <p><strong>Note:</strong> -webkit-scrollbar is not supported for Firefox and IE/Edge.</p>

   <?php

      echo str_repeat("Hello America! here is my text what I need for this page.

      here we add the text that corresponds to the title and pages

       we want to build.

       Using Custom CSS Scrollbar we can add more windows on the same page

        and each with more content on the screen.

        <br />",14);
 ?>

</body>

  </html>

Note: Use external CSS instead.

How to create CSS scrollbar with box shadow: - examples

You can try to execute the following code to change CSS scrollbar with box shadow on this page.

Example:

Example 1, How to create CSS style text size, color and bold - examples:

  <!DOCTYPE html>

  <html>

  <head>

  <title>create Style Custom Scrollbar - examples - example</title>

  <style>

  /* width */

  ::-webkit-scrollbar {
width: 24px;

  }

  
/* Track */

  ::-webkit-scrollbar-track{
  box-shadow: inset 0 0 6px navy; 
  border-radius: 12px;

  }

  
/* Handle */

  ::-webkit-scrollbar-thumb {

    background: blue; 

    border-radius: 12px;

  }

  
/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

background: #33CCFF;

}

  </style>

  </head>

  <body>

     <h1>CSS create Style Custom Scrollbar</h1>

     <p><strong>Note:</strong> -webkit-scrollbar is not supported for Firefox and IE/Edge.</p>

   <?php

      echo str_repeat("Hello America! here is my text what I need for this page.

      here we add the text that corresponds to the title and pages

       we want to build.

       Using Custom CSS Scrollbar we can add more windows on the same page

        and each with more content on the screen.

        <br />",14);
 ?>

</body>

  </html>

Note: Use external CSS instead.

css style scrollbar, in div, firefox, cross browser, horizontal, ie, edge, button, overflow CSS Style Scrollbar - css tutorial

3187. CSS Padding, top, bottom, left, right, css tutorial
CSS Padding, top, bottom, left, right css tutorial
https://www.agernic.com/css-tutorial/css-padding-top-bottom-left-right.html

667. CSS tutorials - w3resource

https://www.w3resource.com/css/CSS-tutorials.php

811. CSS border-top-style property - CSS tutorials - w3resource

https://www.w3resource.com/css/border/CSS-border-top-style-property.php

3179. CSS align content Property - CSS align text - how to create, css tutorial
CSS align content Property - CSS align text - how to create css tutorial
https://www.agernic.com/css-tutorial/css-align-content-property-css-align-text-how-to-create.html

2226. CSS Tutorial - Build a navigation bar
Normally to create a navigation bar (horizontal or vertical menu) the HTML lists are a good start point. You can then use CSS to give it some awesomeness. You will also use a link inside the li element. So let
https://tutorialehtml.com/en/css-tutorial-build-a-navigation-bar/

2708. Selectors - CSS tutorial
EchoEcho.Com : The complete CSS tutorial
http://www.echoecho.com/cssselectors.htm