如何在文本区域中设置滚动条样式？

Question

我相信这应该不会像看起来的那样困难...我不能使用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中有效吗？

有什么想法吗？

- Chris Carruthers

---

可能是如何为textarea样式化滚动条的重复问题。 - Curtis

仅适用于WebKit：https://dev59.com/questions/NW445IYBdhLWcg3w6eRo#4641257 - thirtydot

Answer 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/

- Huy Nguyen

---

-webkit- 样式只能在 Chrome 浏览器上工作，不是吗？ - oldboy

它仅适用于_webkit_浏览器。不仅仅是Chrome。所以，实际上这是很多的，因为Edge现在也是webkit。 - dudewad

Answer 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) {
.....
}

- RSM

---

嗨，谢谢。不幸的是，这似乎也不起作用，我也很难在网上找到任何信息，尽管我认为这应该非常简单。 - Chris Carruthers