0

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.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.

Community
  • 1
  • 1
JM4
  • 6,740
  • 18
  • 77
  • 125
  • given the space, how would you like to deal with text that overflows that width?... You could truncate it and add '...' as one option. – Fosco Nov 12 '10 at 19:59
  • I am not looking to truncate, I want the field to expand on the dropdown – JM4 Nov 12 '10 at 20:02
  • Then you probably want to set a `min-width` attribute instead. Perhaps this can be done to the background element as well. – Fosco Nov 12 '10 at 20:34
  • does not work - i tried that at first pass. see 2nd to last sentence above edit - My background image is not wide enough to encompass the data returned and will either be distorted or blank. It is obvious I could simply create a new css element with a new background but trying to avoid doing that for one instance on one page. – JM4 Nov 13 '10 at 01:01

1 Answers1

1

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.

edeverett
  • 8,012
  • 33
  • 28