Changing color of React textarea resize corner

Question

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:

Answer 1

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>

Answer 2

i have try to research on that , and this is what i get :

The little diagonal lines at the bottom right corner of a textarea are typically part of the browser's default styling and are not directly customizable using CSS. However, you can try a workaround by using a custom CSS trick called "appearance" to hide or modify the appearance of the textarea's resize handle. Here's an example:

#comment-box {
  border-color: darkred;
  box-shadow: 0 0 0 0.25rem rgba(139, 0, 0, 0.2);
  resize: vertical; /* or horizontal, depending on your needs */
  appearance: none;
}

#comment-box::-webkit-resizer {
  display: none; /* Hide the default diagonal resize handle in WebKit browsers */
}

By setting appearance: none;, you can override the default styling of the resize handle. The ::-webkit-resizer selector specifically targets the resize handle in WebKit browsers (like Chrome and Safari) and hides it using display: none;.