We help IT Professionals succeed at work.

CSS scroll bars and buttons

Sideas asked
Last Modified: 2012-08-13

I recently heard you could do buttons (like go) and change elements of scroll bars (colour etc.) with css. Has anyone got some good example or tutorials for this?

Watch Question

Top Expert 2006
This one is on us!
(Get your first solution completely free - no credit card required)
Gertone (Geert Bormans)Information Architect
Top Expert 2006

Hi scolja,
> Scrollbar:  http://www.activsoftware.com/code_samples/code.cfm/CodeID/9/CSS/Change_Scrollbar_Color

what this site doesn't say is that these properties are Internet Explorer 5.5 for Windows or higher only

Top Expert 2006

Thanks Gertone, that's definitely an important point.  While it's probably bad form anyway to color the scrollbar, it isn't cross-browser compliant.

-- Jason


Ah, so scroll bars are windows IE only, not FF or anything mac based? (i ask as i use a mac at home, wehre im typing this).

The button stuff is cross platform though right?

Thanks for the swift reply btw.
Top Expert 2006


You should be safe with the styling of buttons across different types of browsers and platforms.

-- Jason
Top Expert 2006

> The button stuff is cross platform though right?
AFAIK, you can only style buttons in Safari if you use the <button> tag:  http://www.sanbeiji.com/?p=469
Sorry to sound like an old git... but it's not a good idea to start messing with the user interface!

Firstly,  you don't know which platform someone's running.  Mac,  Symbian, Windows,  whatever.  Also,  with Windows you can change the look and feel - I prefer the Windows2000 feel to the Fisher-Price XP interface.  What about when we all change to vista?

Secondly,  I'm used to my user interface and don't recognise changes.  I remember seeing one 'smart person' who used a black scrollbar next to a black page.  I never even saw the b****y thing.  I do wonder who's the stupid one;  me,  the humble visitor,  or the designer.

To answer GS's Mac point:
You can't change Safari standard buttons,  dropdowns,  radio buttons,  or checkboxes.  They use the 'wonderful' OSX scheme.  You can change the background of <input type="text"> but that's about it.  As an aside,  Safari does look massively better than Firefox on a Mac.  Pity it's such a lousy browser!
Top Expert 2006

> Pity it's such a lousy browser!
It's probably the best browser available today.
It's the only one to pass the acid2 test:  http://www.webstandards.org/act/acid2/guide.html
====>> he got me!!!
OK,  let me take that back... gulp.

What I meant was... Safari's got its quirks.  Plenty of them.  Given that the internet is littered with sites that only run on IE,  and I don't like IE,  I have to use another browser.  I've found that Firefox is pretty good. OK,  it's outstanding.  Especially when you have those amazing addons such as Adblock (say no more!).  Then there's the Web Developer's Toolbar,  Colorzilla,  MeasureIt.  What more could I need.

So,  Safari's on my Mac.  Along with Firefox.  I find that although Safari's nice,  there's too many sites that won't work properly with it.  I guess it could be called quirky.  Me,  I just use Firefox and vote with my feet.

So why did I 'dis Safari?  Because I don't like refactoring my sites to get them to work on a minority browser.  Sure,  it could be the most perfect browser out there.  But I still have to do additional work to make the sites work properly with it.  OK,  I'm lazy.  But not half as lazy as some people!

I kind of feel we're having a discussion along the lines of many a discussion I had in 1998:  is IE4 better than NS4?  The jist of this was that NS rigidly adhered to the standards so threw up more errors,  which allegedly made developers create better sites.  IE on the other hand was far more tollerant of problems (e.g. forgetting to close a </td>).  Sure,  the HTML was sloppy,  but it got the job done.  

Now I will need to wash my mouth out for saying that.  NS was morally right,  but MS won the battle.  I think the right course was somewhere between the two camps.

Me,  I'm just chuffed to bits with my Mac and even more happy that I've a choice of browser.  Freedom!!!
For a css tutorial you could do a lot worse than
A particularly useful feature is their 'try it and see' feature where you edit code and view results.
Lots of examples:
certainly worth a visit.

For a dazzling example of designer flair to make Glenn head back to his hidey-hole check out

Standards compliance doesn't have to be boring!

I've stopped digging.  Could someone find me a ladder!


Thanks guy, got alot out of that, they just don't give you enough points to go round :0/
Assists don't hurt!
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.