html - How to control the width of select tag?

Question

I have a list of countries, some with a very long name:

<select name=countries>
 <option value=af>Afghanistan</option>
 <option value=ax>?land Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>

By default, the select box would be as long as the longest option in the list. I want to create a select box such that it exhibits the default behaviour when viewed from a wide browser window, but fit in nicely to 90% of container width when viewed from a narrow browser window, smaller than the length of the longest option.

I tried min-width: 90%;, but it didn't work. Can this be done by CSS styling alone?

Answer 1

USE style="max-width:90%;"

<select name=countries  style="max-width:90%;">
 <option value=af>Afghanistan</option>
 <option value=ax>?land Islands</option>
 ...
 <option value=gs>South Georgia and the South Sandwich Islands</option>
 ...
</select>  

LIVE DEMO