Create a custom dropdown select with an arrow, listing USA, Canada, and UK as options.

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">


<div class="container">


<div class="select-wrapper">
  <select>
    <option>Apple</option>
    <option>Banana</option>
  </select>
  <span class="arrow"></span>
</div>



  </div>

CSS

.select-wrapper {
  position: relative;
  width: 200px;
}

.select-wrapper select {
  appearance: none;
  width: 100%;
  padding: 10px 40px 10px 12px;
}

.select-wrapper .arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}



html,body {
  color: #454545;
}

.container {
  margin-top: 5% !important;
}