Change textarea scrollbar design using CSS
Scrollbars are an essential part of user interfaces, providing a way to navigate content that overflows a container. While browsers have default scrollbar styles, they may not always match the design of your website or application. In this tutorial, we’ll explore how to change the design of the scrollbar in a <textarea> element using CSS, so you can create a more customized and visually appealing user experience.
Customizing the Textarea Scrollbar
To customize the scrollbar of a <textarea> element, you can use the ::-webkit-scrollbar pseudo-element for WebKit-based browsers (such as Chrome and Safari) and the scrollbar-width and scrollbar-color properties for Firefox. Let’s dive into each of these methods:
- Using
::-webkit-scrollbar(for WebKit Browsers) - Using
scrollbar-widthandscrollbar-color(for Firefox)
1. Using ::-webkit-scrollbar (for WebKit Browsers)
Target the <textarea> element:
1 2 3 | textarea { /* Your custom styles here */ } |
Style the scrollbar:
1 2 3 4 5 6 7 8 9 10 11 | textarea::-webkit-scrollbar { width: 12px; /* Adjust the width as needed */ } textarea::-webkit-scrollbar-thumb { background-color: #4CAF50; /* Change the thumb color */ } textarea::-webkit-scrollbar-track { background-color: #f1f1f1; /* Change the track color */ } |
Customize scrollbar on hover:
1 2 3 | textarea::-webkit-scrollbar-thumb:hover { background-color: #45a049; /* Change the thumb color on hover */ } |
2. Using scrollbar-width and scrollbar-color (for Firefox)
Target the <textarea> element:
1 2 3 | textarea { /* Your custom styles here */ } |
Style the scrollbar:
1 2 3 4 | textarea { scrollbar-width: thin; /* or auto for default width */ scrollbar-color: #4CAF50 #f1f1f1; /* thumb and track colors */ } |
Customize scrollbar on hover:
1 2 3 | textarea:hover { scrollbar-color: #45a049 #f1f1f1; /* thumb color on hover */ } |
Below is the entire code for customizing the scrollbar design of a <textarea> element using CSS for both WebKit-based browsers and Firefox:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* Target the <textarea> element */ textarea { width: 300px; height: 150px; padding: 10px; /* Your custom styles here */ } /* For WebKit-based browsers (Chrome, Safari) */ textarea::-webkit-scrollbar { width: 12px; /* Adjust the width as needed */ } textarea::-webkit-scrollbar-thumb { background-color: #4CAF50; /* Change the thumb color */ } textarea::-webkit-scrollbar-track { background-color: #f1f1f1; /* Change the track color */ } textarea::-webkit-scrollbar-thumb:hover { background-color: #45a049; /* Change the thumb color on hover */ } /* For Firefox */ textarea { scrollbar-width: thin; /* or auto for default width */ scrollbar-color: #4CAF50 #f1f1f1; /* thumb and track colors */ } textarea:hover { scrollbar-color: #45a049 #f1f1f1; /* thumb color on hover */ } </style> <title>Custom Scrollbar in Textarea</title> </head> <body> <textarea>This is a textarea with a custom scrollbar design.</textarea> </body> </html> |
Conclusion
Customizing the scrollbar design of a <textarea> element using CSS is a simple but effective way to enhance the aesthetics of your web page or application. By following the steps outlined in this tutorial, you can create scrollbars that align with your design preferences and make the user experience more enjoyable.
So, go ahead and experiment with different colors, widths, and styles to find the scrollbar design that complements your project’s look and feel. Happy coding! 🚀
