更改React文本区域的颜色调整角大小

Question

React textarea右下角小对角线的颜色可以调整吗？我已经改变了边框颜色，但小对角线仍然是灰色的（在 Chrome 和 Firefox 中）。我已经尝试了 VSCode 建议的所有颜色属性，但没有任何效果。

成分：

 <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);
}

渲染：

Answer 1

我尝试对此进行研究，这就是我得到的：

文本区域右下角的小对角线通常是浏览器默认样式的一部分，不能使用 CSS 直接自定义。但是，您可以尝试使用名为“外观”的自定义 CSS 技巧来隐藏或修改文本区域的调整大小手柄的外观。这是一个例子：

#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 */
}

通过设置appearance: none;，您可以覆盖调整大小手柄的默认样式。 ::-webkit-resizer 选择器专门针对 WebKit 浏览器（如 Chrome 和 Safari）中的调整大小句柄，并使用 display: none; 隐藏它。