CSS hover scrollbar cursor in textarea

Question

I have a textarea with a scrollbar. I'm aware of that it may only work in webkit browsers, which is fine.

I added hover and it did not work as expected. The background turned red which means that the hover works, but the cursor does not change.

Am I doing something wrong or may it be Chrome that did not implemented it fully?

Make sure to click "Run code snippet" to see the demo, or go here: https://jsfiddle.net/k4dm6pgL/

textarea {
  height: 150px;
  width: 500px;
}

textarea::-webkit-scrollbar {
  background-color: #fff;
  width: 16px;
}

textarea::-webkit-scrollbar-track {
  background-color: #fff;
}

textarea::-webkit-scrollbar-track:hover {
  background: red;
  cursor: pointer;
}

textarea::-webkit-scrollbar-thumb {
  background-color: #babac0;
  border-radius: 16px;
  border: 4px solid #fff;
}

textarea::-webkit-scrollbar-button {
  display: none;
}

<textarea>Gingerbread cheesecake bonbon cotton candy cheesecake. Topping pudding ice cream cupcake apple pie pastry caramels. Lemon drops ice cream icing chocolate bar dessert ice cream ice cream. Chocolate cake biscuit cotton candy.

Danish tiramisu tiramisu macaroon fruitcake caramels topping. Halvah oat cake donut. Chocolate cake sugar plum gingerbread jelly cookie. Bear claw marzipan biscuit soufflé donut.

Apple pie chocolate cake tart liquorice pudding sweet roll. Pie gummi bears cake. Dessert apple pie carrot cake tiramisu bear claw.

Danish pie croissant. Cookie halvah lollipop sweet roll gummies wafer marzipan chocolate cake. Caramels chocolate cotton candy cotton candy candy canes. Jelly beans lollipop marzipan chocolate cake chocolate cake cookie.

Dragée bonbon oat cake sweet roll toffee jujubes chocolate cake bear claw sweet. Sesame snaps cupcake pie donut ice cream brownie. Danish carrot cake gummi bears oat cake sweet roll oat cake dessert chocolate cake cake. Caramels tart liquorice.

Gingerbread cheesecake bonbon cotton candy cheesecake. Topping pudding ice cream cupcake apple pie pastry caramels. Lemon drops ice cream icing chocolate bar dessert ice cream ice cream. Chocolate cake biscuit cotton candy.

Danish tiramisu tiramisu macaroon fruitcake caramels topping. Halvah oat cake donut. Chocolate cake sugar plum gingerbread jelly cookie. Bear claw marzipan biscuit soufflé donut.

Apple pie chocolate cake tart liquorice pudding sweet roll. Pie gummi bears cake. Dessert apple pie carrot cake tiramisu bear claw.

Danish pie croissant. Cookie halvah lollipop sweet roll gummies wafer marzipan chocolate cake. Caramels chocolate cotton candy cotton candy candy canes. Jelly beans lollipop marzipan chocolate cake chocolate cake cookie.

Dragée bonbon oat cake sweet roll toffee jujubes chocolate cake bear claw sweet. Sesame snaps cupcake pie donut ice cream brownie. Danish carrot cake gummi bears oat cake sweet roll oat cake dessert chocolate cake cake. Caramels tart liquorice.</textarea>

The same thing can be edited here as well: https://jsfiddle.net/k4dm6pgL/

Answer 1

I found a simple solution, which works fine for me.

Use this:

textarea {
    cursor: auto;
}

Answer 2

Currently cursor does not seem to be supported for any of the scrollbar elements. This is an expected behaviour for such unfinished properties.

This blog post on WebKit mentions several possible customisations, but the cursor is not stated. Other properties such as visibility: hidden are not supported either.

One workaround may be to add a div near your textarea, wrap these two in another div, set the height for the parent div instead, and style the internal div to stay under the scrollbar and set the cursor on it.