Làm cách nào để kiểm soát chiều rộng của thẻ được chọn?

Question

Tôi có một danh sách các nước, một số với một tên rất dài:

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

Theo mặc định, chọn hộp sẽ được miễn là tùy chọn dài nhất trong danh sách. Tôi muốn tạo một hộp chọn để nó thể hiện hành vi mặc định khi được xem từ cửa sổ trình duyệt rộng, nhưng phù hợp với 90% chiều rộng vùng chứa khi được xem từ cửa sổ trình duyệt hẹp, nhỏ hơn độ dài của tùy chọn dài nhất.

Tôi đã thử min-width: 90%; nhưng không hoạt động. Điều này có thể được thực hiện bởi kiểu dáng CSS một mình không?

Answer 1

SỬ DỤNG 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

Bạn đã chỉ đơn giản nhận nó về phía sau. Chỉ định chiều rộng tối thiểu sẽ làm cho menu chọn luôn là ít nhất là chiều rộng đó, vì vậy nó sẽ tiếp tục mở rộng đến 90% bất kể kích thước cửa sổ là gì, cũng ít nhất là kích thước của tùy chọn dài nhất.

Thay vào đó, bạn cần sử dụng max-width. Bằng cách này, nó sẽ cho phép trình đơn chọn mở rộng đến tùy chọn dài nhất của nó, nhưng nếu mở rộng vượt quá chiều rộng tối đa 90% đã thiết lập của bạn, hãy kéo nó xuống chiều rộng đó.

Answer 3

Add div wrapper

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

và sau đó viết CSS

#myForm select { 
width:200px; } 

#myForm select:focus { 
width:auto; } 

Hy vọng điều này sẽ giúp.