background-color of resizable textarea in Firefox

Question

I want to set the background-color of several textareas on my website to something other than white.

textarea
{
  background-color:Red;
  width:120px;
  height:80px;
}

<textarea>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</textarea>

Above snippet works perfectly fine, except when applied to a resizable textarea in firefox that also has a scrollbar.

The background and the little draggable corner at the lower-right of the textarea become red and the scrollbar stays the same, but since the draggable corner is under the scrollbar, it looks kind of stupid.
Is there any way to either also color the scrollbar or to not color the corner, preferably using CSS only?

Possible duplicate of: http://stackoverflow.com/a/14150577/3244407 — Ethan, Dec 08 '16 at 09:03
?? How is that a duplicate ? **OP asked for "textarea grabber in firefox" & you linked a scrollbar** ?? Maybe it could or could not have the answer but surely not a duplicate. Someone even upvoted that ? — Nikhil Nanjappa, Dec 08 '16 at 09:17
@NikhilNanjappa To be fair, I did write coloring the scrollbar would be an acceptable option, although I'd much rather exclude the grabber and I'd really like to not use JavaScript. I can see how one may come to think this might be a duplicate, but I really think this question is different enough, especially since the linked answer actually only is the "last resort" option for me. — sandbo00, Dec 08 '16 at 09:23

score 1 · Accepted Answer · answered Dec 08 '16 at 09:27

Unfortunately in Firefox you do not have the flexibility to play around with the textarea grabber(atleast as of now). The maximum you can do is just disable it using

textarea {
  resize: none; /* disables resizability */
}

other options to this found here

But for webkit browsers though there are few more options

You could customise ONLY the grabber with a background-color or even a background image

#textarea::-webkit-resizer { 
   background-color: green; 
}

#textarea::-webkit-resizer { 
   background-image: url(resizer-background.png); 
}

Or even just hide it - This is not the same as resize: none;, this just hides it not disabling it

::-webkit-resizer {
  display: none;
}

Hope you got a better understanding.

background-color of resizable textarea in Firefox

1 Answers1