Style / Replace a select box using prototype / scriptactulous

Question

Hey everyone,

I'm trying to style my select box, I assume I need some type of javascript method.

I'm using rails - and sticking with prototype/scriptactulous.

Does anyone know of any solutions?

EDIT:

CSS doesn't do nearly what I'm trying to accomplish:

Answer 1

For styling select boxes you actually need js. In CSS you can style everything, but the button. The problem is that the button is os dependent and is not controlled by the browser. So maybe the man asks the right question. I'm searching for a protoype/script.aculo.us solution too. I use these frameworks and I don't want to change to mootools ot jquery. In fact I found an interesting prototype project- IPS. http://yura.thinkweb2.com/playground/in-place-select/ There are also select multiple controls(I need select for one element only now so maybe I'll stick to ips). livepipe.net/control/selectmultiple is one of them.

Answer 2

I wrote a prototype select box control today. It allows styling everything- the select input box, the button, the dropdown box(where options are shown), the scrollbar and its buttons, the options, adding images to options. The class can replace select inputs automatically just by calling the script if select controls have class="replacemeselect" or be called manually. There are a bunch of customization options and you can have multiple styles of selects on a page if you need it. Unlike IPS this class handles keyboard events and has a scrollbar. You may look at the demo: http://awsumlabs.com/selectreplace and use the library if you like it.