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

只需从size="3"移除select即可按预期进行。

<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

仅用于样式选择尝试此方法：

   SELECT 
     Pk_blog_id,
     Blog_title,
     Blog_content,
     Created_at 
     FROM dbo.tb_IEAG_Blogs 
     WHERE Is_archived = 0 
     AND DATEPART(MONTH, CAST(GETDATE() AS DATETIME)) = 2
     ORDER BY tb_IEAG_Blogs.Pk_blog_id DESC 

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

}