2

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,

noober
  • 4,819
  • 12
  • 49
  • 85

2 Answers2

3

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.

You
  • 22,800
  • 3
  • 51
  • 64
  • Is it normal the button is still ":active", when I press left mouse button on it, then leave the button area, keeping left mouse button pressed? Regular Windows buttons become unpressed under the same circumstances. – noober Jul 16 '11 at 12:59
  • 1
    @noober: That's up to the browser to decide. [The specs](http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes) simply say "*The `:active` pseudo-class applies while an element is being activated by the user.*". – You Jul 16 '11 at 13:59
  • Hm... But in the same browser non-customized buttons behave like normal Windows buttons. – noober Jul 16 '11 at 17:18
  • 1
    +1 on 'avoid doing it', but if you absolutely have to, *please* implement them properly, tested on multiple platforms, with accessibility in mind. I hate web sites that force me to reach for my mouse when I have my hands on the keyboard, because some cheap hacker only bothered checking for mouse events. – Michael Scheper May 20 '14 at 03:55
2

Often you have to layer divs over these controls or create controls from scratch. Looking at how JQuery UI displays certain controls is a good place to start understanding how it can be done. The easy way is to just use JQuery UI and use themeroller or customized css to style the controls. It's not easy to accomplish some of these tasks on your own.

http://jqueryui.com/

Caimen
  • 2,623
  • 2
  • 26
  • 43