Styling scrollbars the Webkit way

200922 Mar
Styling scrollbars the Webkit way
by James Hopkins
Posted in Proposals
An interesting implementation has recently made its way into the latest Webkit nightlies – a detailed method of styling scrollbars using a combination of new pseudo-elements and pseudo-classes.

Example

Although the new syntax can seem complicated at first, Webkits implementation gives authors the ability to completely alter the look and feel of scrollbars of overflow sections, listboxes, dropdown menus & textareas, and when used in conjunction with border-image and multiple backgrounds, the results can look beautiful.

Whitepaper gives more details on the implementation.

You can skip to the end and leave a response.
Comments
- 01.
  
  John Faulds says:Comment » March 22nd, 2009 at 11:08 pm
  
  Wow, that’s an awful lot of code!
- 02.
  
  Adam Luter says:Comment » March 23rd, 2009 at 1:32 am
  
  Ironic, Safari was the last browser I’d expect to give a whitepaper on widget styling.
- 03.
  
  Nostradamus says:Comment » March 25th, 2009 at 12:43 am
  
  Let the record show that “I called it!”
  I also called it on the basic idea behind cufon.
  I hereby predict apple or opera will implement proper (N.E.S.-like) “sprites” before the end of next year.
- 04.
  
  Mooseman says:Comment » March 29th, 2009 at 1:11 pm
  
  To me, that looks like styling a scrollbar The No Way
  Seriously, 486 lines of code to alter a scrollbar ?? Gimme a break…..thats not development LOLOL
  
  But, I guess they have to start somewhere…
- 05.
  
  dindigul says:Comment » September 10th, 2009 at 12:51 pm
  
  The new property like overflow-x:scroll is helping me to solve some issues when I used iframe.
- 06.
  
  Jens Grochtdreis says:Comment » December 21st, 2009 at 12:09 pm
  
  So Webkit/Safari now mimics Microsoft? You’re serious? We could style scrollbars in IE for years and it was never really nice.
  What’s next? Conditional Comments would be a very nice idea to copy from Microsoft, maybe the only one. Please don’t copy hasLayout ;-)

Subscribe to our RSS

OUR SPONSORS

Advertise here?

CATEGORIES

FRIENDS

Meta

Hosting by:

CSS3

Comments

Leave a Comment