如何设置文本区域上滚动条样式的格式？

发布于 2024-11-29 20:30:44 字数 469 浏览 0 评论 0原文

我确信这应该不像看起来那么困难...我不能使用 JQuery 滚动窗格，因为我需要它在提交时充当标准表单文本区域..需要在 IE7+、Safari 和 IE7+ 中工作;至少 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 ？

有什么想法吗？

原文

I'm sure this shouldn't be as difficult as it seems... I can't use a JQuery scrollpane because I need it to act as a standard form textarea when it gets submitted.. needs to work in IE7+, Safari & firefox at least... any ideas?

Tried this...

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

... but only works in IE ?

Any ideas??

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

焚却相思 2024-12-06 20:30:44

使用 -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/

Use -webkit-scrollbar pseudo-elements for scroll bar:

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

You can find more detail here: https://css-tricks.com/almanac/properties/s/scrollbar/

回复收藏 0 原文

往日 2024-12-06 20:30:44

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

我认为你走在正确的轨道上，尽管滚动条属性需要位于主体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) {
.....
}

I have never done this so im not completely sure on this, but I remember one my colleagues was doing this for a site we were developing and he had the same minor issue.

I think you are along the right track, although the scrollbar properties need to be in the body css like so:

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

Maybe you could try giving the desired text area and id property and apply that in the css, so: