< BACK TO POST
LinkedIn Facebook Twitter

Blog

Pure Css3 Custom Scrollbars

June 25th, 2011 | Cool Stuff , Css3 , Tips and Tricks

WebKit now supports styling of the scrollbars in overflow sections, listboxes, dropdown menus and textareas. Internet Explorer supported this feature after version 5.5 . Unfortunately Firefox still doesnt support custom scrollbars. Anyways, checkout the screenshots and style your scrollbars.

DEMO DOWNLOAD

Source Code

<doctype! html>
<html>
	<head>
		<title>Custom Css3 Scrollbars</title>
		<style>
			body{
				font-family: sans-serif;
				font-size:12px;
				background: #fff;
				overflow-y: hidden;
			}
			#widget{
				width: 300px;
				height:400px;
				overflow: auto;
			}
			::-webkit-scrollbar {
				width: 10px;
				height: 10px;
			}
			::-webkit-scrollbar-button:start:decrement,
			::-webkit-scrollbar-button:end:increment  {
				display: none;
			}
			
			::-webkit-scrollbar-track-piece  {
				background-color: #3b3b3b;
				-webkit-border-radius: 6px;
			}
			
			::-webkit-scrollbar-thumb:vertical {
				-webkit-border-radius: 6px;
				background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
			}
		</style>
	</head>
	<body>
		<div id="widget">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est sapien. Maecenas aliquam scelerisque eros quis luctus. Phasellus nisi lectus, tempus ut scelerisque in, adipiscing nec neque. Nullam ac metus eget lorem imperdiet luctus non in mauris. Maecenas porta ultricies sapien, non laoreet nisl accumsan egestas. Etiam viverra tincidunt euismod. Vestibulum dui massa, ultrices ac malesuada eu, varius quis ipsum. Nam tincidunt tempor nulla, id consequat velit hendrerit a. Fusce bibendum condimentum massa non fringilla. Ut sagittis, lorem eu varius tempus, nisl nisi aliquet odio, eu fringilla arcu arcu at lectus. Sed ligula magna, dapibus fringilla vestibulum quis, pulvinar vitae libero. Nunc tempor elementum magna, volutpat lacinia neque suscipit bibendum. Nunc vel pulvinar turpis. Etiam pretium malesuada nibh vel pellentesque.</p>

			<p>Cras vitae justo arcu. Proin at tellus id libero adipiscing ornare. Aliquam pharetra consequat velit id mollis. Aenean imperdiet libero ut velit viverra eget posuere purus rhoncus. Vestibulum leo mi, malesuada nec commodo eget, condimentum sit amet urna. Nam sem lectus, pellentesque ut commodo eget, scelerisque porta diam. Suspendisse potenti. Curabitur in neque sem. Nullam molestie quam aliquet lorem convallis id semper nisi eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
		</div>
	</body>
</html>

Responses to "Pure Css3 Custom Scrollbars"

  1. Lincoln says:

    It works perfectly! 😀 Thanks for the tip

  2. comrade says:

    Thanks a lot….

  3. Mike says:

    Is there a way that this code work in firefox? in chrome all is great but firefox dont show new scrollbar.

  4. Kavitha says:

    It works perfectly in safari and chrome but not in IE and Firefox.

  5. ss says:

    does not work in IE9

  6. Rashid Khan says:

    its working good dude..thanks

  7. L0j1k says:

    This doesn’t work in IE/FF because it is very clearly a WEBKIT RULESET! RTFM!

  8. xXNooBMaNXx says:

    Hey guys, notice that is a “webkit” css code, so it will only work with webkit engine based browsers.

    Tip: Never expect that IE works correctly with anything…

  9. anonymous says:

    What the hell its not working in firefox :-\

  10. Karen says:

    Can you tell me why the scrollbar thumb background doesn’t work???

    http://www.jarodsafehouse.com/scrollbox.html

  11. […] Pure CSS3 Custom jQuery Scrollbar […]

  12. Hamsom says:

    I pity you. Damn idiots keep asking why it doesn’t work in IE and Mozilla. RTFM or Read the freaking comments.

  13. prameshwar says:

    I am not getting this change in Mozilla Firefox 28.0 version can you please suggest me why it’s not reflecting in Mozilla Firefox 28.0 version.

  14. WhiteZombie says:

    > Not working on IE nor FF
    > 40% of the share are FF & IE

Leave a Reply