Textarea scrollbar change cursor pointer on hover in CSS webkit

This post describes how to change the cursor on hover over a custom scrollbar in a textarea in CSS.

Cause

If you add a custom scrollbar to a textarea using -webkit-scrollbar e.g.

/* Set the style for a textarea scrollbar. */
textarea::-webkit-scrollbar {
    background-color: #f0f0f0;
    width: 8px;
}
/* Set the style for a textarea scrollbar thumb. */
textarea::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #c2c2c2;
}
    /* Set the style for a textarea scrollbar thumb hover. */
    textarea::-webkit-scrollbar-thumb:hover {
        background-color: #696969;
    }

You may notice that the cursor remains a text cursor when it's hovered over the scrollbar, even if you set cursor: default in the -webkit-scrollbar-thumb:hover CSS:

Resolution

To resolve this issue, set the cursor style to auto on the textarea itself (not textarea::-webkit-scrollbar-thumb:hover):

textarea {   
    cursor: auto;
}

The scrollbar will now have the default cursor on hover.