<div class="container">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
</select>
</div>
.container {
display: inline-block;
min-width: 400px;
position: relative;
}
.container::after {
border: 5px solid transparent;
border-top-color: #aaa;
content: '';
display: inline-block;
height: 0;
pointer-events: none;
position: absolute;
right: 12px;
top: calc(50% + 4px);
transform: translateY(-50%);
width: 0;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: .25rem;
color: #495057;
cursor: pointer;
display: inline-block;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
padding: .375rem 1.75rem .375rem .75rem;
vertical-align: middle;
width: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.