How To Control The Width Of Select Tag? June 25, 2024 Post a Comment I have a list of countries, some with a very long name: AfghanistanÅland IslandsSolution 1: USE style="max-width:90%;"<selectname=countriesstyle="max-width:90%;"><optionvalue=af>Afghanistan</option><optionvalue=ax>Åland Islands</option> ... <optionvalue=gs>South Georgia and the South Sandwich Islands</option> ... </select>CopyLIVE DEMOSolution 2: 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.Solution 3: Add div wrapper<divid=myForm><selectname=countries><optionvalue=af>Afghanistan</option><optionvalue=ax>Åland Islands</option> ... <optionvalue=gs>South Georgia and the South Sandwich Islands</option> ... </select></div>Copyand then write CSS#myForm select { width:200px; } #myForm select:focus { width:auto; } CopyHope this will help. Share Post a Comment for "How To Control The Width Of Select Tag?"
Post a Comment for "How To Control The Width Of Select Tag?"