Question

我想调整下拉选择菜单的高度，并在下拉列表中将大小设置为10。但是，这会导致选择菜单下方的所有内容减少10行。我希望选择菜单中的选项显示在前景上，或者只是它不会导致其下方的内容移动。

<select id="particle" onfocus='this.size=10;' onblur='this.size=1;'>
<option value="angryVillager">angryVillager</option>
<option value="barrier">barrier</option>
<option value="blockcrack">blockcrack</option>
<option value="blockdust">blockdust</option>
<option value="bubble">bubble</option>
<option value="cloud">cloud</option>
<option value="crit">crit</option>
<option value="damageIndicator">damageIndicator</option>
<option value="depthsuspend">depthsuspend</option>
<option value="dragonbreath">dragonbreath</option>
<option value="dripLava">dripLava</option>
<option value="dripWater">dripWater</option>
<option value="droplet">droplet</option>
<option value="enchantmenttable">enchantmenttable</option>
<option value="endRod">endRod</option>
<option value="explode">explode</option>
<option value="fallingdust">fallingdust</option>
<option value="fireworksSpark">fireworksSpark</option>
<option value="flame">flame</option>
<option value="footstep">footstep</option>
<option value="happyVillager">happyVillager</option>
<option value="heart">heart</option>
<option value="hugeexplosion">hugeexplosion</option>
<option value="iconcrack">iconcrack</option>

Answer 1

一个简单的解决方案可能是将选择器的位置设为absolute，然后使用css将元素下方的所有元素移位财产top。您还可以使用隐藏元素向下移动select下方的所有元素（请参阅Ufuk Akoguz答案）。

#particle {
   position: absolute;
}

/* Stuff below the selector */

#title {
   padding-top: 45px;
}

有关示例，请参阅此JSFiddle。

修改1

要在用户点击选项时关闭选择器，只需在onclick回调中添加。

<select id="particle" onfocus='this.size=10;' onblur='this.size=1;' onclick='this.size=1'>

Answer 2

我希望它会有所帮助

＆＃13;

    div{
    border: none;
   height: 29px;
   padding: 5px;
   width: 268px;
   }

＆＃13;

<div>
<select id="particle" onfocus='this.size=10;' onblur='this.size=1;'>
<option value="angryVillager">angryVillager</option>
<option value="barrier">barrier</option>
<option value="blockcrack">blockcrack</option>
<option value="blockdust">blockdust</option>
<option value="bubble">bubble</option>
<option value="cloud">cloud</option>
<option value="crit">crit</option>
<option value="damageIndicator">damageIndicator</option>
<option value="depthsuspend">depthsuspend</option>
<option value="dragonbreath">dragonbreath</option>
<option value="dripLava">dripLava</option>
<option value="dripWater">dripWater</option>
<option value="droplet">droplet</option>
<option value="enchantmenttable">enchantmenttable</option>
<option value="endRod">endRod</option>
<option value="explode">explode</option>
<option value="fallingdust">fallingdust</option>
<option value="fireworksSpark">fireworksSpark</option>
<option value="flame">flame</option>
<option value="footstep">footstep</option>
<option value="happyVillager">happyVillager</option>
<option value="heart">heart</option>
<option value="hugeexplosion">hugeexplosion</option>
<option value="iconcrack">iconcrack</option>
</select>
</div>
<p>something</p>

＆＃13;

Javascript选择下面的下拉内容移动

2 个答案: