Customize scroll bar for one div only?

[FethrdWlf]

I have a page* consisting of four parts: The header, the main content, and then two floating divs below that (they're side by side). The one on the right has a scroll bar. I'm looking to change the CSS of just that one bar. I've found some CSS** online that will change it, but it changes all of them, meaning the one that scrolls the whole page.

How can I achieve the change of just one specific bar?

* - View the page here.
** -

/* Turn on a 13x13 scrollbar */
	::-webkit-scrollbar {
		width: 13px;
		height: 13px;
	}
	 
	::-webkit-scrollbar-button:vertical {
		background-color: red;
		border: 1px dashed blue;
	}
	 
	/* Turn on single button up on top, and down on bottom */
	::-webkit-scrollbar-button:start:decrement,
	::-webkit-scrollbar-button:end:increment {
		display: block;
	}
	 
	/* Turn off the down area up on top, and up area on bottom */
	::-webkit-scrollbar-button:vertical:start:increment,
	::-webkit-scrollbar-button:vertical:end:decrement {
		display: none;
	}
	 
	/* Place The scroll down button at the bottom */
	::-webkit-scrollbar-button:vertical:increment {
		background-color: black;
		border: 1px dashed blue;
	}
	 
	/* Place The scroll up button at the up */
	::-webkit-scrollbar-button:vertical:decrement {
		background-color: purple;
		border: 1px dashed blue;
	}
	 
	::-webkit-scrollbar-track:vertical {
		background-color: blue;
		border: 1px dashed pink;
	}
	 
	/* Top area above thumb and below up button */
	::-webkit-scrollbar-track-piece:vertical:start {
		border: 1px solid #000;
	}
	 
	/* Bottom area below thumb and down button */
	::-webkit-scrollbar-track-piece:vertical:end {
		border: 1px dashed pink;
	}
	 
	/* Track below and above */
	::-webkit-scrollbar-track-piece {
		background-color: green;
	}
	 
	/* The thumb itself */
	::-webkit-scrollbar-thumb:vertical {
		height: 50px;
		background-color: yellow;
	}
	 
	/* Corner */
	::-webkit-scrollbar-corner:vertical {
		background-color: black;
	}
	 
	/* Resizer */
	::-webkit-scrollbar-resizer:vertical {
		background-color: gray;
	}

I know the above code makes everything look wacky, I was gonna' change it later on.

[DWcourse]

Your link doesn't work

[FethrdWlf]

Originally Posted by DWcourse

Your link doesn't work

Sorry, let's fix that: villaingogh.x10.mx

[DWcourse]

Link works now but I'm not seeing any scrollbar customization.

[gentleone]

According to that code you have it's only for webkit browsers (Safari & Chrome).

If you want a cross-browsers solution then you should look into jscrollPane
http://jscrollpane.kelvinluck.com/

[FethrdWlf]

Originally Posted by DWcourse

Link works now but I'm not seeing any scrollbar customization.

I haven't used it because it totally messes up the look of the website. There's green and red and purple, and my website is kinda dark, not a kindergarten classroom.

Originally Posted by gentleone

According to that code you have it's only for webkit browsers (Safari & Chrome).

If you want a cross-browsers solution then you should look into jscrollPane
http://jscrollpane.kelvinluck.com/

Thanks gentleone, I'ma look into it soon.

[DWcourse]

Originally Posted by FethrdWlf

I haven't used it because it totally messes up the look of the website. There's green and red and purple, and my website is kinda dark, not a kindergarten classroom.

It's just easier to help out if you post a sample page. A link to a page that doesn't have the issue isn't much help.

[FethrdWlf]

Originally Posted by DWcourse

It's just easier to help out if you post a sample page. A link to a page that doesn't have the issue isn't much help.

Okay, I'll add the CSS, just one sec... There.

[edbr]

you could add moz scrollbars i suppose

[FethrdWlf]

Originally Posted by edbr

you could add moz scrollbars i suppose

Oh, are the scrollbars not showin' up as being customized in Firefox?...