Question

我确信这不应该像看起来那么困难......我不能使用JQuery scrollpane，因为我需要它在提交时充当标准格式textarea ..需要在IE7 +中工作，Safari＆amp; 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？

任何想法??

Answer 1

我从来没有这样做，所以我不能完全确定这一点，但我记得我的一位同事正在为我们正在开发的网站做这件事，他有同样的小问题。

我认为你是在正确的轨道上，虽然滚动条属性需要在身体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) {
.....
}

Answer 2

对滚动条使用-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/

Answer 3

您可以使用此脚本：

http://studio.radube.com/html-textarea-custom-scrollbar

但是，我认为在纯CSS中设置textarea滚动条时总会遇到问题，因为浏览器会根据需要进行渲染。

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

3 个答案: