Question

How can I drop the CSS property ::-webkit-scrollbar from a single HTML element?

In my CSS file, I have this code:

::-webkit-scrollbar {
    width:  6px;
    height: 6px;
    background-color:transparent;
}
::-webkit-scrollbar-track {
    background-color:transparent;
    width: 6px;
}
::-webkit-scrollbar-track-piece  {
    background-color: blue;
}
::-webkit-scrollbar-thumb {    
    background-color: #d4dee8;
    width: 6px;
}

It will replace every scrollbar with webkit scrollbars. But there are two places where I don’t need webkit scrollbar, I need normal scrollbars instead.

HTML file:

<td class="viewDialogLabel" height="21" style="width:156px;padding:0px"> 
    <!-- Inner elements --->
</td>

Here, I need to change class viewDialogLabel to normal scrollbars.

How do I get this effect?

Answer 1

WebKit supports the handy CSS value initial, which sets properties back to the values they would have had if no styles applied to the page.

So, you can reset the ::-webkit-scrollbar values you’ve set like this:

.viewDialogLabel::-webkit-scrollbar {
    width: initial;
    height: initial;
    background-color:initial;
}
.viewDialogLabel::-webkit-scrollbar-track {
    background-color:initial;
    width: initial;
}
.viewDialogLabel::-webkit-scrollbar-track-piece  {
    background-color: initial;
}
.viewDialogLabel::-webkit-scrollbar-thumb {    
    background-color: initial;
    width: initial;
}

See http://jsfiddle.net/uVGKr/

---

WebKit also supports the :not() selector, so I would have thought the following amendment to your original CSS would prevent the custom scrollbars from applying to that table cell:

:not(.viewDialogLabel)::-webkit-scrollbar {
    width:  6px;
    height: 6px;
    background-color:transparent;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track {
    background-color:transparent;
    width: 6px;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track-piece {
    background-color: blue;
}
:not(.viewDialogLabel)::-webkit-scrollbar-thumb {
    background-color: #d4dee8;
    width: 6px;
}

However, it doesn’t work for me in Chrome 16 — the custom scrollbar styles aren’t applied at all (see http://jsfiddle.net/uVGKr/1/). I’m not sure if I’m doing something wrong, if you just can’t combine these selectors, or if this is a WebKit bug.

As per your suggested edit removing the td selectors from the CSS, this seems to be working in Chrome 24 at least: http://jsfiddle.net/uVGKr/2/