I have customized the look and field of my form's select field with the following code:

.formbox select { width:240px; border:0; padding:11px 15px; font:normal 12px Arial, Helvetica, sans-serif; color:#000; margin-top:5px; background: url(../images/search_bg开发者_StackOverflow中文版.gif) left top no-repeat; }

the field works well except in the case where the content within my select field is wider than 240 pixels.

If I remove the width field, the drop down is fine but my actual select button is way over the right of the field background.

If i change the width, the image I have for my width is distorted and/or not long enough so it looks tacky.

Is it possible to have the select field itself at one width and any dropdown content at another?

EDIT

I found this link: Dropdownlist width in IE but I am not looking to use JS at all.

You won't be able to do this cross-browser. Some browsers allow a limited amount of customisation of select elements, but generally it's not worth the effort.

If you really need to have a custom look, then I'd recommend going with a full javascript solution.