Question

Is it possible to make standard controls like buttons and scrollbars look different? For instance, I have my own images for normal and pressed button states, how to make a button use them?

If I just set backgrounds for both normal and pressed styles, the button still has its initial form, that doesn’t match my image form.

Then, what about scrollbars? They are complex, and contain more than one image for every state.

Regards,

Answer 1

For form controls; make use of the :active and :hover pseudo-classes in CSS, and replace the background of your buttons and form elements with images. In this excellent tutorial, you’re guided through creating a custom search form using HTML5 and CSS3 with these techniques.

For scrollbars, either avoid changing their style altogether (especially if you’re talking about the viewport scrollbars, as these are part of the browser, not your website, and users expect them to look a certain way. If you absolutely have to change them, simply use progressively enhancing javascript (perhaps using jQuery) to first hide the scrollbars (setting overflow: hidden), then inserting button and input type="range" (or non-HTML5 elements if browser support is important) into the DOM, styling them the way you want and hooking their click events to scroll whatever needs scrolling. There are many jQuery plugins that do this for you.