How can I set the WebKit scroll bar styles of a textarea element from JavaScript?

I have a textarea DOM element. I am setting certain styles on it, for example:

textArea.style.border = "2px";

That's all fine. But how would I set a WebKit style, say the thumb colour?

I have tried the following:

textArea.style.webkitScrollbarThumbColor = "#ff0000";

and

textarea.style.scrollbarThumbColor = '#ff0000';

and

textarea.style.scrollbarColor = '#ff0000 #ff0000';

None of these work. I am using Chrome browser for my testing.

Thanks for any help.

Customizing the scrollbar involves setting properties on the pseudo-element associated with the scrollbar. You can refer to the Mozilla Developer Network (MDN) documentation for more information on how to style the scrollbar using the CSS ::-webkit-scrollbar pseudo-element: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

In JavaScript, you cannot directly select a pseudo-element. However, you can achieve a similar effect by setting the scrollbar width using CSS variables and then modifying the CSS variables using JavaScript. The following example demonstrates how to do this:

document.querySelector('textarea').style.setProperty('--scrollbarWidth', '12px');

Here's the full sample code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelector('textarea').style.setProperty('--scrollbarWidth', '12px');

<!-- language: lang-css -->

textarea {
  overflow: auto;
  height: 150px;
  --scrollbarBG: white;
  --scrollbarColor: lightblue;
  --scrollbarWidth: 20px;
}

textarea::-webkit-scrollbar {
  width: var(--scrollbarWidth);
}

textarea::-webkit-scrollbar-track {
  background-color: var(--scrollbarBG)
}

textarea::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarColor);
  border: 3px solid var(--scrollbarBG);
}

<!-- language: lang-html -->

<textarea>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</textarea>

<!-- end snippet -->