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,151
  • 9
  • 55
  • 63
priya
  • 45
  • 2
  • 4
  • 2
    If this is the *browser* scrollbar, I suggest leaving it alone. Websites that change things like this create a very user-hostile experience. – Cody Gray Feb 22 '11 at 09:18

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
  • 665,005
  • 155
  • 1,345
  • 1,328
  • 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 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
  • 217,782
  • 47
  • 385
  • 346
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