Search code examples
cssreactjscolorstextarea

Changing color of React textarea resize corner

Is it possible to adjust the color of the little diagonal lines at the bottom right corner of React textarea? I have switched the border color, but the small diagonal lines are still gray (both in Chrome and Firefox). I have tried every color property that VSCode would suggest, nothing has worked.

Component:

 <textarea id = "comment-box" className="form-control" rows= "3" value={newCommentBody} onChange={(event) => setNewCommentBody(event.target.value)}></textarea>

CSS:

#comment-box {
  border-color: darkred;
  box-shadow: 0 0 0 0.25rem rgba(139, 0, 0, 0.2);
}

Rendered:

enter image description here

Solution

  • WebKit provides the pseudo-element ::-webkit-resizer for the resize control it automatically adds to the bottom right of textarea elements. The ::-webkit-resizer pseudo-element allow some basic styling.

    textarea::-webkit-resizer {
  border-width: 8px;
  border-style: solid;
  border-color: transparent orangered orangered transparent;
}
    <textarea>text</textarea>