How to control the width of select tag

Question

I have a list of countries  some with a very long name    lt select name countries gt    lt option value af gt Afghanistan lt  option gt    lt option value ax gt   land Islands lt  option gt         lt option value gs gt South Georgia and the South Sandwich Islands lt  option gt        lt  select gt    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

User · Answer

Add div wrapper   lt div id myForm gt   lt select name countries gt    lt option value af gt Afghanistan lt  option gt    lt option value ax gt   land Islands lt  option gt         lt option value gs gt South Georgia and the South Sandwich Islands lt  option gt        lt  select gt   lt  div gt    and then write CSS   myForm select    width 200px      myForm select focus   width auto      Hope this will help

User · Answer

You ve simply got it backwards  Specifying a minimum width would make the select menu always be at least that width  so it will continue expanding to 90  no matter what the window size is  also being at least the size of its longest option   You need to use max-width instead  This way  it will let the select menu expand to its longest option  but if that expands past your set maximum of 90  width  crunch it down to that width

User · Answer

USE style  max-width 90        lt select name countries  style  max-width 90    gt    lt option value af gt Afghanistan lt  option gt    lt option value ax gt   land Islands lt  option gt         lt option value gs gt South Georgia and the South Sandwich Islands lt  option gt        lt  select gt      LIVE DEMO

[html] How to control the width of select tag?

Examples related to html

Examples related to css