How to make textarea scrollbar cursor as pointer, keeping the textarea cursor as text. Now it shows default cursor(text cursor and arrow cursor).

textarea {
  height: 50px;
  width: 500px;
  cursor: auto;
  overflow-y: auto;
}

textarea::-webkit-scrollbar {
  cursor: pointer;
}

<textarea> asdasd <br> asdasd <br> asdasd <br> asdasd <br> asdasd <br> </textarea>

CodePudding user response：

Why did you set the cursor as auto if it's the pointer you need, just change that in textarea

after the change :

textarea {
  height: 50px;
  width: 500px;
  cursor: pointer;
  overflow-y: auto;
}

textarea might look like this.

CodePudding user response：

Set cursor: pointer and then on focus return the cursor to auto to give it the experience of clicking on the text box to activate it

textarea { cursor: pointer }
textarea:focus { cursor: auto }

<textarea rows="4" cols="60">Adipiscing habitasse lacinia vestibulum a habitant ante ut a inceptos scelerisque elit himenaeos varius tincidunt. Fusce fringilla eros arcu pharetra scelerisque etiam magnis adipiscing adipiscing nunc scelerisque vestibulum fames nisi mauris. Vestibulum nibh egestas per vel ultrices platea placerat mi in a mi at quam ultrices a magna vel auctor mus. Cubilia parturient scelerisque ultrices at et est condimentum eu nibh sapien quam elementum ligula vestibulum ultrices lectus metus suspendisse. Taciti mus nulla habitasse habitasse bibendum augue condimentum vulputate eget libero sed venenatis malesuada netus consectetur ut. Sit porttitor iaculis a sem urna vestibulum a parturient a per ultricies faucibus hac cursus vestibulum interdum per nisl a faucibus.</textarea>