2

I need to change the color of a scrollbar button when the mouse moves over it which is at top and bottom (left and right) of scrollbar. How can I change it in WebKit? When I use hover, it is not working. Please help me.

Smi
  • 13,850
  • 9
  • 56
  • 64
priya
  • 65
  • 2
  • 4

3 Answers3

3

You may or may not be able to change the hover styles on scrollbar buttons as this is browser-dependent. Namely, no known browser has hover styles for scrollbar buttons.

EDIT: thirtydot points out that scrollbar button hover styles are on their way to WebKit's implementation; see his comment for a demo.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Just in case you weren't aware of the WebKit way, check my answer. – thirtydot Feb 23 '11 at 00:04
  • @thirtydot: I'm aware, but I don't think it supports hover styles that the OP is asking for. Sweet demo you have there though! – BoltClock Feb 23 '11 at 00:06
  • [See here](http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html) for an example of the "hover styles". – thirtydot Feb 23 '11 at 00:12
  • 2
    Oh dear. The end of the web as we know it is near. Tiny, impossible-to-use, custom scrollbars that serve absolutely no functional or semantic purpose are coming to a page near you. Everyone should just **pretend they never saw that demo**. – Cody Gray - on strike Feb 23 '11 at 04:30
  • 1
    @Cody Gray: We'll be alright until someone makes a "WebKit scrollbar generator". When that happens, *then* we're doomed :) – thirtydot Feb 23 '11 at 09:39
1

You specifically said "how can i change it in webkit", so:

An older answer of mine: Apple-like scrollbars using CSS

Apple's version: http://help.apple.com/mobileme/index.html#mm5b08c671

Live Demo (tested in Chrome dev, Safari 5)

Some useful blog posts:

Note that it's rather time consuming to:

  • Get it right.
  • Make it look good.

It does looks very slick on Apple's help site, so it may be worth the effort.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
0

So, is possible to change color on a scrollbar, but u have to consider that most browser don't like these css..

body {scrollbar-3dlight-color:#ffd700; 
scrollbar-arrow-color:#ff0; 
scrollbar-base-color:#ff6347; 
scrollbar-darkshadow-color:#ffa500; 
scrollbar-face-color:#008080; 
scrollbar-highlight-color:#ff69b4; 
scrollbar-shadow-color:#f0f}

Otherwise you can use Jquery for personalize you scrollbar. Look at this link: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Obi-wan
  • 184
  • 1
  • 1
  • 6