Menu
Fiddle
I am using ::-webkit-scrollbar to make a custom scrollbar in Chrome. I have a border-radius: 10px and in doing that, there are white corners at the top:
Sorry, it's kinda hard to see since it's a scrollbar.
I want the corners to be the same color as the header div (#dadae3). Is there any way to get rid of the white corners using CSS only without changing the styles of the scrollbar?
CSS (entire):
body { padding: 0; margin: 0 } ::-webkit-scrollbar { width: 13px; } ::-webkit-scrollbar-track { background: #ffffff; border-radius: 10px; border: 1px solid #aeaeb5 } ::-webkit-scrollbar-thumb { background: #dadae3; border-radius: 10px; border: 1px solid #aeaeb5 } ::-webkit-scrollbar-thumb:hover { background: #c4c4cc } ::-webkit-scrollbar-thumb:active { background: #aeaeb5 } HTML:
<div style='background: #dadae3; width: 100%; height: 30px;'></div> <div style='width: 100%; height: 1000px'></div> 
852
::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet. This is often the bottom-right corner of the browser window.
For the webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar : the scrollbar. ::-webkit-scrollbar-button : the arrows that point up or down on the scrollbar. ::-webkit-scrollbar-thumb : the scrolling handle that can be dragged.
Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used.
You have to set the ::-webkit-scrollbar-corner pseudo-element, e.g.
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); } You can set the background-color property for the pseudo-element -webkit-scrollbar, doing that you can set the "corner color".
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
