CSS Custom Scrollbars, Cursor & Pointer Styles

Customizing scrollbars and cursor styles is a simple way to enhance user experience and make your website feel interactive and unique. While these are mostly visual enhancements, they also improve usability by providing clear feedback to users.

Custom Scrollbars

Modern browsers (especially WebKit-based browsers like Chrome, Safari, Edge) support CSS scrollbar styling using pseudo-elements.

Example 1: Basic Custom Scrollbar

::-webkit-scrollbar → the whole scrollbar
::-webkit-scrollbar-track → the background track
::-webkit-scrollbar-thumb → the draggable part (thumb)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Scrollbar Example</title>
<style>
  /* Scroll container */
  .scroll-container {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
    margin: 50px auto;
  }

  /* WebKit Scrollbar */
  .scroll-container::-webkit-scrollbar {
    width: 12px;
  }

  .scroll-container::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
  }

  .scroll-container::-webkit-scrollbar-thumb {
    background: #0077cc;
    border-radius: 10px;
  }

  .scroll-container::-webkit-scrollbar-thumb:hover {
    background: #005fa3;
  }

  /* Firefox */
  .scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #0077cc #f0f0f0;
  }
</style>
</head>
<body>
  <div class="scroll-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Praesent vitae eros eget tellus tristique bibendum.</p>
    <p>Donec rutrum sed sem quis venenatis.</p>
    <p>Proin viverra risus a eros volutpat tempor.</p>
    <p>In quis arcu et eros porta lobortis sit amet at magna.</p>
    <p>Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    <p>Scroll to see the custom scrollbar in action!</p>
    <p>Keep adding more content to make the scrollbar visible.</p>
  </div>
</body>
</html>

Example 2: Thin, Minimal Scrollbar

This style is perfect for minimalist designs and doesn’t distract users.

/* For a thin, modern scrollbar */
.scroll-container::-webkit-scrollbar {
  width: 6px;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
}
.scroll-container::-webkit-scrollbar-track {
  background-color: transparent;
}

Cursor & Pointer Styles

The cursor property allows you to change how the pointer looks on different elements. This improves UX, letting users know what is clickable or draggable.

Common values:

default → Standard arrow
pointer → Hand icon (links/buttons)
text → Text selection
crosshair → Crosshair pointer
move → Indicates draggable items

Basic Cursor Types

button {
  cursor: pointer; /* hand icon for clickable elements */
}

a {
  cursor: pointer;
}

textarea, input {
  cursor: text; /* I-beam for text editing */
}

div.drag {
  cursor: grab; /* shows grab icon */
}

Example 1: Hover Effects with Custom Cursor

<button class="custom-btn">Hover me</button>

.custom-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #0077cc;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer; /* default pointer */
  transition: transform 0.2s;
}

.custom-btn:hover {
  cursor: pointer; /* pointer on hover */
  transform: scale(1.05);
}

Example 2: Custom Image Cursor

.custom-cursor {
  cursor: url('cursor.png'), auto; /* fallback auto */
}

Combining Scrollbars & Cursor

You can create interactive UI elements where custom scrollbars and cursor changes reinforce each other:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Scrollbar + Cursor Demo</title>
<style>
  /* Scroll container */
  .scroll-container {
    width: 350px;
    height: 200px;
    overflow-y: scroll;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 30px;
  }

  /* Thin, modern scrollbar */
  .scroll-container::-webkit-scrollbar {
    width: 6px;
  }
  .scroll-container::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
  }
  .scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .scroll-container::-webkit-scrollbar-track {
    background-color: transparent;
  }
  .scroll-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.5) transparent;
  }

  /* Cursor styles */
  .scroll-container:hover {
    cursor: grabbing; /* indicates draggable content */
  }

  button.custom-btn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #0077cc;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer; /* pointer on hover */
    transition: transform 0.2s, background-color 0.2s;
    margin-bottom: 20px;
  }
  button.custom-btn:hover {
    transform: scale(1.05);
    background-color: #005fa3;
  }

  .draggable {
    width: 150px;
    height: 80px;
    background-color: #ff6600;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    border-radius: 5px;
    user-select: none;
    margin-bottom: 30px;
  }
  .draggable:active {
    cursor: grabbing;
    background-color: #cc5200;
  }

</style>
</head>
<body>
  <h1>Interactive Scroll + Cursor Demo</h1>

  <!-- Button with pointer cursor -->
  <button class="custom-btn">Hover Me!</button>

  <!-- Draggable div -->
  <div class="draggable">Drag Me</div>

  <!-- Scrollable container -->
  <div class="scroll-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Praesent vitae eros eget tellus tristique bibendum.</p>
    <p>Donec rutrum sed sem quis venenatis.</p>
    <p>Proin viverra risus a eros volutpat tempor.</p>
    <p>In quis arcu et eros porta lobortis sit amet at magna.</p>
    <p>Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
    <p>Scroll down to see the thin scrollbar in action!</p>
    <p>Move your cursor over this area to see the grab cursor effect.</p>
  </div>
</body>
</html>

CSS Handbook

CSS Handbook