Design the HTML5 dropdown as shown in the image

Question

How can I make a drop-down look like in th image using only HTML/HTML5?

I tried using this code,but it does not generates drop-down exactly as required. :

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

Thanks in advance.

Do you mean the style of the dropdown itself or the mechanism behind it? — elasticman, Mar 03 '16 at 08:54

score 0 · Answer 1 · answered Mar 03 '16 at 08:15

Just remove size="3" from select will make as per your expected.

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

score 0 · Answer 2 · edited May 23 '17 at 12:15

Customizing the scrollbar is not an easy thing and is not supported in Firefox, look at this answer:

CSS customized scroll bar in div

For styling only the select try this method:

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

Design the HTML5 dropdown as shown in the image

2 Answers2