CSS for SELECT element

I am currently trying to properly CSS style a SELECT element.

Specifically, what I want to do is to h开发者_Python百科ave the initial selected value be a bit distanced from the arrow/select/icon/whatever that opens the list of options.

Currently, it appears as: VALUE[V] where [V] is the triangle/arrow button. I want to create a spacing between the end of VALUE, whatever that comes to be, and the [V] button/part of the select element. Margin is obviously not relevant and padding takes place outside of the [V] as well.

Since I have several SELECT's - is there a 'CLEAN' or 'ELEGANT' method to do this through CSS other than individually giving a width to each of these elements?

Regards G.Campos

Why cant you use padding? It seems to do what you are after.. Check this out:

http://jsfiddle.net/GYyKh/1/

Make your select have a class so that you can call it from your css. Then do something like

.spacer {
    width:500px;
}

That will give all the elements with that class name a width that you specify

You may find this article useful: http://css-tricks.com/select-cuts-off-options-in-ie-fix/

It suggests different possibilities with JavaScript.