Jak kontrolować szerokość zaznaczonego znacznika?

Question

Mam listę krajów, niektóre z bardzo długiej nazwie:

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

Domyślnie polu Wybierz byłby tak długo jak najdłuższej opcji na liście. Chcę utworzyć okno wyboru tak, aby wyświetlało domyślne zachowanie podczas oglądania z szerokiego okna przeglądarki, ale mieści się w ładnym 90% szerokości kontenera, gdy jest oglądane z wąskiego okna przeglądarki, mniejszego niż długość najdłuższej opcji.

Próbowałem min-width: 90%;, ale to nie zadziałało. Czy można to zrobić tylko przez styl CSS?

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

Answer 2

pan po prostu dostał go od tyłu. Określenie minimalnej szerokości spowodowałoby, że menu wyboru zawsze będzie miało szerokość równą co najmniej, więc będzie nadal rozszerzać się do 90%, niezależnie od rozmiaru okna, co najmniej o wielkość najdłuższej opcji.

Zamiast tego należy użyć max-width. W ten sposób menu wyboru rozszerzy się do najdłuższej opcji, ale jeśli rozwinie się po ustawionym maksymalnym rozmiarze o 90%, zmniejsz ją do tej szerokości.

Answer 3

dodawania div otoki

<div id=myForm> 
<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> 
</div> 

a następnie napisać CSS

#myForm select { 
width:200px; } 

#myForm select:focus { 
width:auto; } 

nadzieję, że pomoże.