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

Question

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 have a custom dropdown arrow

Answer 1

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';

Answer 2

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

Check this article for example: Style Web Forms Using CSS

Answer 3

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.