How to override scrollbar on a child element only - css

Question

I have some custom scrollbar styles coming from external css file which I don't have any control of.
::-webkit-scrollbar {
width: 5px;
}
I would like keep this custom scrollbar styles but override it within a container element. I've tried to target it different ways with no luck.
#test::-webkit-scrollbar {
width: 10px !important;
}
http://jsfiddle.net/Lk5ct8ta/

Answer 1

You're seeing the scrollbar on the body. Your div#test is 2000px tall causing the body to overflow, so the body gets the scrollbar, but your custom styles are assigned to div#test which does not have overflowed content.
For example, here div#test is reduced in height and overflow set to scroll, with more content forcing it's content to overflow and the scrollbar styles to apply:
div{
height:200px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-color:#808080;
}
#test::-webkit-scrollbar {
width: 10px !important;
}
#test::-webkit-scrollbar-thumb {
background-color:red;
}
<div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.</div>