如何格式化 textarea 上的滚动条样式？

Posted 2023-05-07

【中文标题】如何格式化 textarea 上的滚动条样式？

【英文标题】：How do I format the scrollbar style on a textarea?

【发布时间】：2011-10-28 02:27:23

【问题描述】：

我确信这应该不会像看起来那么困难...我不能使用 JQuery 滚动窗格，因为我需要它在提交时充当标准表单文本区域...需要在 IE7+ 中工作, Safari 和 firefox 至少...有什么想法吗？

试过这个...

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;

...但只能在 IE 中使用？

有什么想法吗？？

【问题讨论】：

How do I style the scrollbar of a textarea 的可能重复项

仅适用于 WebKit：***.com/questions/4641169/…

【参考方案1】：

使用-webkit-scrollbar 伪元素作为滚动条：

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;

您可以在此处找到更多详细信息：https://css-tricks.com/almanac/properties/s/scrollbar/

【讨论】：

-webkit- 样式只能在 chrome 浏览器上使用，不是吗？？

它只适用于 webkit 浏览器。不仅仅是铬。所以，考虑到 Edge 现在是 webkit，这实际上很多。

【参考方案2】：

我从来没有这样做过，所以我对此并不完全确定，但我记得我的一位同事正在为我们正在开发的网站这样做，他也遇到了同样的小问题。

我认为你是在正确的轨道上，虽然滚动条属性需要像这样在 body css 中：

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;

也许您可以尝试提供所需的文本区域和 id 属性并将其应用到 css 中，所以：

textarea.(insertrelevantID) 
.....

【讨论】：

嗨，谢谢，不幸的是，这似乎也不起作用，虽然我认为这真的应该很简单，但也很难在网上找到任何东西