Can we drop the CSS property "-webkit-scrollbar" from one node?

Question

How can I remove the CSS ::-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 each scroll bar with webkit scroll bars. But there are two places where I don't need the webkit scrollbar, instead I need the usual scrollbars.

HTML file:

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

Here I need to change the viewDialogLabel class to regular scrollbars.

How do I get this effect?

Answer 1

WebKit supports the convenient CSS initial value, which returns properties to the values ​​they would have if no style was applied to the page.

So, you can reset the values ::-webkit-scrollbar that you selected 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 think that the following amendment to your original CSS would prevent custom scrollbars from applying to this 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, this does not work for me in Chrome 16 - the usual style of scroll styles is applied (see http://jsfiddle.net/uVGKr/1/ ). I'm not sure if Im doing something wrong if you just cannot combine these selectors or if this is a WebKit error.

According to your suggested edit removing td selectors from CSS, this seems to work 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 new-scrollbar class will have custom scrollbars.

Or you can try to override properties in specific elements:

 .old-scrollbar::-webkit-scrollbar { background: none; } .old-scrollbar::-webkit-scrollbar-track { background: none; } /* ... */ 

Try also with different properties / values.

Answer 3

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