style a form (select) using javascript, no framework?

anyone know how i can style a form element with javascript, but without a framework? Found a nice plugin for jquery but I don't use jquery at all on my website so I want to avoid it if possible..

I want to create a select box that looks like this:

http://iforce.co.nz/i/qebncmoz.png

to clarify, i want to set an image/background on the select box so that I can hav开发者_如何学Pythone a custom dropdown arrow

You can style elements through the style attribute (replacing '-' with camel case) like this:

document.getElementById('elem').style.backgroundColor = 'red';

But it's better to put the styles in CSS and just change classes in JavaScript instead:

document.getElementById('elem').className = 'roundedCornerButton';

You have to use a different element. <select> can't be used because you can't style it very well using CSS, save for the background colour and font.

The best direction I can point you in is http://v2.easy-designs.net/articles/replaceSelect/ - it seems to explain how to do what you want to do pretty well.

You won't need Javascript for that, pure CSS will do.

Check this article for example: Style Web Forms Using CSS

The styling is done through CSS, not JS. JQuery is used for shortcuts in Javascript.

There is no "replacement" happening - the tag is still there under the scene but good use of CSS is what makes it look like that image.

There is a number of drop down menu replacements out there that don't require a framework. Try Googling javascript drop down. See a fancy example here.

But consider using a framework. 20-50kb are not that much anymore in these times, it's not that much even for a dialup line. Frameworks provide a lot of little helpers for all sorts of tasks and you can link even to Google hosted versions, with the great likelihood that the user already has them cached.

If the form element has an ID associated, then you can use code similar to the following:

elem = document.getElementById(elemId);
elem.style.background = 'white';

I assume you want to dynamically change the element style; differently, you don't need JavaScript to obtain what you want.

It's not possible without javascript see here my question How to style a <select> dropdown with CSS only without JavaScript?

And if uyou don't want to use any framework then try this

http://v2.easy-designs.net/articles/replaceSelect/