<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <div class="container">
    <option data-type="⚡️" value="pikachu" selected><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png">Pikachu</option>
    <option data-type="💤" value="snorlax"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/143.png">Snorlax</option>
    <option data-type="✨" value="mew"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/151.png">Mew</option>
    <option data-type="🔥" value="charmander"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/4.png">Charmander</option>
    <option data-type="💧" value="squirtle"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/7.png">Squirtle</option>
    <option data-type="🍃" value="bulbasaur"><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png">Bulbasaur</option>
  </div>
</select>
:root {
  --radius: 0.5em;
  --space: 1em;
}

select, ::picker(select) {
  appearance: base-select;
  border-radius: var(--radius);
}

selectedcontent {
  & img {
    display: none;   
  }
}

select::picker-icon {
  content: '👇';
}

select:open {
  background-color: lightgray;
}

option::checkmark {
  content: attr(data-type);
}

option:checked {
  background-color: ivory;
}

.container {
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr 1fr;
  padding: var(--space);
  gap: var(--space);
  
  option {
    display: inline-flex;
    flex-direction: column;
    border-radius: var(--radius);
    
    img {
      width: 4em;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.