HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS scrollbar-color Example</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 20px;
      background: #f8fafc;
    }

    div {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-color: blue lightgray;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 12px;
      background: white;
    }
  </style>
</head>
<body>
  <h1>Custom Scrollbar Colors</h1>
  <p>Scroll inside the box to see the blue thumb and light gray track in supporting browsers.</p>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet est et risus convallis, ut accumsan magna tincidunt. Integer pulvinar dui non nisi elementum, a scelerisque nisl fermentum. Nulla facilisi. Cras venenatis sem at velit auctor, nec lacinia lectus sodales. Duis convallis mi eu facilisis tristique. Suspendisse potenti. Donec scelerisque, nunc in vehicula facilisis, justo ante malesuada urna, vel vulputate nisi justo sed lorem. Quisque id magna quam.</p>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS scrollbar-color Property - Blue Thumb and Light Gray Track