Home/ Questions/Q 7898149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T08:21:20+00:00

I have edited some cool scrollbars. I needed text to be in the middle,

  • 0

I have edited some cool scrollbars. I needed text to be in the middle, so it is like a frame…like you see when you accept someones terms of service and stuff. I have tried to add text, but i can not seem to get it to work? http://jsfiddle.net/Hunter4854/RHMCm/ Please do not down vote if you have a question, just add a comment, and i will answer 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <head>
<meta content="en-us" http-equiv="Content-Language">
<style>body {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: green;
}

.a::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.a::-webkit-scrollbar:vertical {
    background: -webkit-linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */
}

.a::-webkit-scrollbar:horizontal {
    background: -webkit-linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */
}

.a::-webkit-scrollbar-track:vertical {
    background: -webkit-linear-gradient(left, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(left, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* W3C */
    border-radius: 15px;
}

.a::-webkit-scrollbar-track:horizontal {
    background: -webkit-linear-gradient(top, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* W3C */
    border-radius: 15px;
}

.a::-webkit-scrollbar-thumb {
    border-radius: 15px;
    border: 1px solid black;
}

.a::-webkit-scrollbar-thumb:vertical {
    background: -webkit-linear-gradient(left, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(left, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* W3C */
}

.a::-webkit-scrollbar-thumb:horizontal {
    background: -webkit-linear-gradient(top, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* W3C */
}

.a::-webkit-scrollbar-thumb:hover {
}

.a::-webkit-scrollbar-corner {
    background: black;
}

.a::-webkit-scrollbar-button:vertical {
    background: -webkit-linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */
}

.a::-webkit-scrollbar-button:horizontal {
    background: -webkit-linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */
}
​</style>



</head>



<div class="a" style="position:absolute;width:200px;height:200px;background:white;overflow-y:scroll">
    </div>

    See it here http://jsfiddle.net/3uTjv/

    • 0