<div class="container">
<select name="" id="">
<option value="">Tangerine</option>
<option value="">Mango</option>
<option value="">Grapefruit</option>
<option value="">Kiwi</option>
<option value="">Apricot</option>
</select>
</div>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
select {
appearance: none;
outline: none;
border-width: 1px;
border-color: #D1D1D1;
border-radius: 4px;
border-style: solid;
background-color: #fff;
&:focus {
border-color: #40a7ec;
}
padding: 1.125em .875em;
padding-right: 2.4em;
background-image: url('https://assets.codepen.io/103108/arrow.svg');
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 1em;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.