I'm trying to change the color/style of a table scrollbar.   Everything I have tried changing in the CSS has failed.   Below is what I tried to add but it seems to be ignored when the page is rendered.   Any suggestions on how to accomplish this?


SyntaxEditor Code Snippet

table::-webkit-scrollbar{
    background-color: green;
}
table::-webkit-scrollbar-thumb{
    background-color: red;
}
table::-webkit-scrollbar-thumb:window-inactive{
    background-color: blue;
}

Is the table the one it's scrolling or it's the wapper container that is scrolling? i'm guessing that's why your changes dont have any effect

I was able to get the scrollbar to appear by setting the style on the wrapper to "width 100%"   and then on the table record element I added the style below.   It seems that the table element has the scroll associated with it rather than the wrapper.

SyntaxEditor Code Snippet

"overflow-x: auto; display:block;" 


Nevermind I figured it out... I didn't realize IE11 had different CSS controls for scrollbars.   It renders fine in Chrome and I need to work on my CSS for IE now.

Solution

Josh Herron wrote:

I'm trying to change the color/style of a table scrollbar.   Everything I have tried changing in the CSS has failed.   Below is what I tried to add but it seems to be ignored when the page is rendered.   Any suggestions on how to accomplish this?


SyntaxEditor Code Snippet

table::-webkit-scrollbar{
    background-color: green;
}
table::-webkit-scrollbar-thumb{
    background-color: red;
}
table::-webkit-scrollbar-thumb:window-inactive{
    background-color: blue;
}

Hi, 

You can use this. This is what I use to stylize the scroll bars of my applications. 

Apply to the CSS of the screens you want to use.


.scrollList{
    height: 330px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.scrollStyle::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
    border-radius: 10px;
    background-color: #FFF;
}

.scrollStyle\:\:-webkit-scrollbar{
    width: 6px;
    background-color: #d2dae7;
    border-radius: 0px 6px 0px 0px;
}

.scrollStyle::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: rgba(0,0,0,0.3);
}


With this css, in my list, the scroll bar looks like this:


But with that css in hand, you can play around with the design.

I hope to help you.

Solution

That CSS will not work in IE11 though correct?   My understanding is that I will need to use this type of logic for that browser.

table {
  scrollbar-base-color: #59abe3;
  scrollbar-face-color: #a4d7f9;
  scrollbar-3dlight-color: #7fc1ef;
  scrollbar-highlight-color: #a4d7f9;
  scrollbar-track-color: #e7f4f9;
  scrollbar-arrow-color: black;
  scrollbar-shadow-color: black;
  scrollbar-dark-shadow-color: black;
}