How do I format the scrollbar style on a textarea?

Question

I'm sure this shouldn't be as difficult as it seems... I can't use a JQuery scrollpane because I need it to act as a standard form textarea when it gets submitted.. needs to work in IE7+, Safari & firefox at least... any ideas?

Tried this...

textarea {
    scrollbar-face-color: #ff8c00;
    scrollbar-track-color: #fff8dc;
    scrollbar-arrow-color: #ffffff;
    scrollbar-highlight-color: #fff8dc;
    scrollbar-shadow-color: #d2691e;
    scrollbar-3dlight-color: #ffebcd;
    scrollbar-darkshadow-color: #8b0000;
}

... but only works in IE ?

Any ideas??

possible duplicate of [How do I style the scrollbar of a textarea](http://stackoverflow.com/questions/3742389/how-do-i-style-the-scrollbar-of-a-textarea) — Curtis, Aug 16 '11 at 14:08
For WebKit only: http://stackoverflow.com/questions/4641169/apple-like-scrollbars-using-css/4641257#4641257 — thirtydot, Aug 16 '11 at 14:08

score 13 · Answer 1 · answered Oct 09 '17 at 03:47

13

Use -webkit-scrollbar pseudo-elements for scroll bar:

textarea::-webkit-scrollbar {
    width: 1em;
}

textarea::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

textarea::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

You can find more detail here: https://css-tricks.com/almanac/properties/s/scrollbar/

answered Oct 09 '17 at 03:47

Huy Nguyen

2,025
3
25
37

`-webkit-` styling would only work on chrome browsers wouldn't it?? – oldboy May 20 '18 at 06:13
1

It would work only on _webkit_ browsers. Not just chrome. So, that's actually a lot given that Edge is now webkit. – dudewad Apr 08 '19 at 16:56

RSM · Answer 2 · 2011-08-16T14:16:11.057

I have never done this so im not completely sure on this, but I remember one my colleagues was doing this for a site we were developing and he had the same minor issue.

I think you are along the right track, although the scrollbar properties need to be in the body css like so:

body {
 scrollbar-face-color: #ff8c00;
    scrollbar-track-color: #fff8dc;
    scrollbar-arrow-color: #ffffff;
    scrollbar-highlight-color: #fff8dc;
    scrollbar-shadow-color: #d2691e;
    scrollbar-3dlight-color: #ffebcd;
    scrollbar-darkshadow-color: #8b0000;
}

Maybe you could try giving the desired text area and id property and apply that in the css, so:

textarea.(insertrelevantID) {
.....
}

Hi thanks, unfortunately this doesn't seem to be working either, struggling to find anything online either though I'd have thought this really should be pretty straightforward — Chris Carruthers, Aug 16 '11 at 14:10

How do I format the scrollbar style on a textarea?

2 Answers2