設計圖像中顯示的HTML5下拉菜單

Question

如何僅使用HTML/HTML5使下拉菜單看起來像圖像一樣？

我嘗試使用此代碼，但根據需要將其不完全產生下拉。 ：

<select name="Select1" size="3"> 
<!--<option value="">- Please select a name -</option>--> 
<option value"210">210</option> 
<option value="110">110</option> 
<option value="410">410</option> 
<option value="337">337</option> 
</select> 

在此先感謝。

Answer 1

只需從select刪除size="3"將根據您的預期。

<select name="Select1" > 
 
    <!--<option value="">- Please select a name -</option>--> 
 
    <option value="210">210</option> 
 
    <option value="110">110</option> 
 
    <option value="410">410</option> 
 
    <option value="337">337</option> 
 
</select>

Answer 2

自定義滾動條並不是一件容易的事情，在Firefox不支持，看這個答案：

CSS customized scroll bar in div

對於造型只選擇嘗試這種方法：

.container, select{ 
 
    position: relative; 
 

 
} 
 

 
select { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    height: 30px; 
 
    padding-left:5px; 
 
    background: transparent; 
 
} 
 

 
select::-ms-expand { 
 
    display: none; 
 
} 
 

 

 
#separator{ 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 70px; 
 

 
} 
 

 
#arrow{ 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 80px; 
 
    font-size: 10px; 
 

 
}

<div class="container"> 
 
    <span id="separator">|</span> 
 
    <span id="arrow">&#x25BC;</span> 
 
    
 
    <select> 
 
    <option>Option</option> 
 
    <option>Option</option> 
 
    <option>Option</option> 
 
    <option>Option</option> 
 
    <option>Option</option> 
 
    </select> 
 
    
 
</div>