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
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout
Find here examples of creative and unique website layouts.
Free CSS HTML Menu
Find here examples of creative and unique website CSS HTML menu.