Can we drop CSS property"-webkit-scrollbar" from a single node? - html

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/

Answer 2

You can specify a more accurate selector:
.new-scrollbar::-webkit-scrollbar {
/* ... */
}
Then, only elements with the class new-scrollbar will have the custom scrollbars.
Or you can try to override the properties in specific elements:
.old-scrollbar::-webkit-scrollbar {
background: none;
}
.old-scrollbar::-webkit-scrollbar-track {
background: none;
}
/* ... */
Also try it with different properties / values.

Answer 3

Instead of removing these properties from those two elements you can specify a separate class or ids for these two elements and override the -webkit-scrollbar styles with new ones