【发布时间】：2019-09-10 09:38:26
【问题描述】：
我正在尝试在下拉框中实现货币列表。我只想在下拉框中显示 10 个选项
我尝试过设置 select 的 size 属性，但它没有箭头可以放下盒子，它只是让 10 个元素一直可见。
这里是html代码
<div class="container jumbotron h1">
<h1 class="cen">Real Time Currency Convertor</h1>
</div>
<form class="container" action="curr.php" method="POST">
<div class="div1">
<div class="cen">
<br>VALUE :
<input type="number" name="val" min="1" value="1" class="size">
</div>
<br>
<div class="cen">
FROM:
<select name="from">
<option value='USD'>American Samoa(US Dollar)</option>
<option value='XCD'>Anguilla(East Caribbean Dollar)</option>
<option value='ARS'>Argentina(Argentine Peso)</option>
<option value='AWG'>Aruba(Aruban Florin)</option>
<option value='AUD'>Australia(Australian Dollar)</option>
<option value='AZN'>Azerbaijan(Azerbaijan Manat)</option>
<option value='BSD'>Bahamas(Bahamian Dollar)</option>
<option value='BHD'>Bahrain(Bahraini Dinar)</option>
//A long list of currencies cut short
<option value='XPF'>Wallis and Futuna Islands(CFP Franc)</option>
<option value='MAD'>Western Sahara(Moroccan Dirham)</option>
<option value='YER'>Yemen(Yemeni Rial)</option>
<option value='ZMW'>Zambia(Zambian Kwacha)</option>
<option value='ZWD'>Zimbabwe(Zimbabwe Dollar)</option>
</select>
</div>
<div class="cen">
<button type="submit" name="sub" id="button" >SUBMIT</button>
<br><br>
</div>
</div>
</form>
这是css文件。
.cen{
text-align: center;
}
.h1{
background-color: rgba(250, 250, 250,0.5);
border-radius: 20px;
}
input[type=number]{
width: 500px;
border-radius: 20px;
}
select{
width: 490px;
border-radius: 20px;
}
#button {
outline:none;
height: 40px;
text-align: center;
width: 130px;
border-radius:40px;
background: #fff;
border: 2px solid rgb(100, 100, 100);
color:rgb(100, 100, 100);
letter-spacing:1px;
text-shadow:0;
font:{
size:12px;
weight:bold;
}
}
#button:hover{
outline:none;
height: 40px;
text-align: center;
width: 130px;
border-radius:40px;
background: rgb(175, 175, 175);
border: 2px solid white;
color:white;
letter-spacing:1px;
text-shadow:0;
font:{
size:12px;
weight:bold;
}
}
.div1{
background-color: rgba(250, 250, 250,0.5);
border-radius: 40px;
font-family: monospace;
font-size:20px;
font-weight: bold;
}
执行上述程序时，下拉框用于拉伸到屏幕末尾。 我想要一个在按下箭头时会下降的下拉框，并且当它下降时只有 10 个选项可见。提前致谢。
【问题讨论】：