<select class="country-select">
  <button>
    <selectedoption></selectedoption>
  </button>
  <option value="" hidden>
    <figure></figure>
    <span>Select a country</span>
  </option>
  <option value="andorra">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Andorra.svg/120px-Flag_of_Andorra.svg.png" alt="" />
    <span>Andorra</span>
  </option>
  <option value="bolivia">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Flag_of_Bolivia.svg/120px-Flag_of_Bolivia.svg.png" alt=""/>
    <span>Bolivia</span>
  </option>
  <option value="cambodia">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/120px-Flag_of_Cambodia.svg.png" alt="" />
    <span>Cambodia</span>
  </option>
  <option value="denmark">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Flag_of_Denmark.svg/120px-Flag_of_Denmark.svg.png" alt="" />
    <span>Denmark</span>
  </option>
  <option value="egypt">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Flag_of_Egypt.svg/120px-Flag_of_Egypt.svg.png" alt="" />
    <span>Egypt</span>
  </option>
  <option value="estonia">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/Flag_of_Estonia.svg/120px-Flag_of_Estonia.svg.png" alt="" />
    <span>Estonia</span>
  </option>
  <option value="ethiopia">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Flag_of_Ethiopia.svg/120px-Flag_of_Ethiopia.svg.png" alt="" />
    <span>Ethiopia</span>
  </option>
  <option value="finland">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Flag_of_Finland.svg/120px-Flag_of_Finland.svg.png" alt="" />
    <span>Finland</span>
  </option>
  <option value="france">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/120px-Flag_of_France.svg.png" alt="" />
    <span>France</span>
  </option>
  <option value="gabon">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Flag_of_Gabon.svg/120px-Flag_of_Gabon.svg.png" alt="" />
    <span>Gabon</span>
  </option>
  <option value="germany">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/120px-Flag_of_Germany.svg.png" alt="" />
    <span>Germany</span>
  </option>
  <option value="ghana">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Ghana.svg/120px-Flag_of_Ghana.svg.png" alt="" />
    <span>Ghana</span>
  </option>
  <option value="greece">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Greece.svg/120px-Flag_of_Greece.svg.png" alt="" />
    <span>Greece</span>
  </option>
  <option value="guatemala">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Flag_of_Guatemala.svg/120px-Flag_of_Guatemala.svg.png" alt="" />
    <span>Guatemala</span>
  </option>
  <option value="guinea">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Flag_of_Guinea.svg/120px-Flag_of_Guinea.svg.png" alt="" />
    <span>Guinea</span>
  </option>
  <option value="guyana">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Flag_of_Guyana.svg/120px-Flag_of_Guyana.svg.png" alt="" />
    <span>Guyana</span>
  </option>
  <option value="haiti">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Flag_of_Haiti.svg/120px-Flag_of_Haiti.svg.png" alt="" />
    <span>Haiti</span>
  </option>
  <option value="honduras">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Flag_of_Honduras.svg/120px-Flag_of_Honduras.svg.png" alt="" />
    <span>Honduras</span>
  </option>
  <option value="hungary">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Flag_of_Hungary.svg/120px-Flag_of_Hungary.svg.png" alt="" />
    <span>Hungary</span>
  </option>
  <option value="iceland">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Flag_of_Iceland.svg/120px-Flag_of_Iceland.svg.png" alt="" />
    <span>Iceland</span>
  </option>
  <option value="india">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Flag_of_India.svg/120px-Flag_of_India.svg.png" alt="" />
    <span>India</span>
  </option>
  <option value="south-africa">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Flag_of_South_Africa.svg/120px-Flag_of_South_Africa.svg.png" alt=""/>
    <span>South Africa</span>
  </option>
</select>
select,
::picker(select) {
  appearance: base-select;
}

/* hide checkmark */
option::before {
  display: none;
}

::picker(select) {
  max-height: 80dvh;
  padding: 0.5rem;
}

option,
selectedoption {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 1rem;
  font-size: 1rem;
  align-items: center;
  padding: 1rem;

  & img,
  & figure {
    width: 100%;
  }
}

[hidden] {
  display: none;
}

button {
  background: aliceblue;
  border: 1px solid gray;
}

selectedoption {
  font-style: italic;

  & figure {
    background-image: linear-gradient(
      0deg,
      #fff 0%,
      #000 0% 20%,
      #fff 0% 40%,
      #000 0% 60%,
      #fff 0% 80%,
      #000 0% 100%
    );
    height: 1rem;
    margin: 0;
  }
}

body {
  margin: 2rem 4rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.