<label class="select">
  <select>
    <option value="1">Pure CSS Select</option>
    <option value="2">With wrapper</option>
    <option value="3">No JS!</option>
  </select>
</label>
<p>NO wrapper "modern" version <a href="https://codepen.io/raubaca/pen/bGWmZje" target="_blank">here</a></p>

:root {
  --background: linear-gradient(30deg, #f39c12 30%, #f1c40f);
  --background-select: linear-gradient(to left, #34495e 3rem, #2c3e50 3rem);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background: var(--background);
  color: white;
}
/* Reset <select> defaults */
select {
  appearance: none;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  box-shadow: none;
}
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.select {
  position: relative;
  display: flex;
  width: min(20rem, 90vw);
  background: var(--background-select);
  border-radius: 0.25rem;
  overflow: hidden;
  // Select style
  select {
    flex: 1;
    padding: 1em;
    cursor: pointer;
  }
  // Arrow style
  &::after {
    content: "\25BC";
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: 0.25s all ease;
    pointer-events: none; // IMPORTANT to click on arrow
  }
  // Arrow hover
  &:hover::after {
    color: #f39c12;
    animation: bounce 0.5s infinite;
  }
}
@keyframes bounce {
  25% {
    transform: translatey(5px);
  }
  75% {
    transform: translatey(-5px);
  }
}
View Compiled
/*
  Pure CSS: Select
  - Wrapper div to apply the arrow
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.