<selectlist class="country-select">
  <button type=selectlist>
    <selectedoption></selectedoption>
  </button>
  <option value="" hidden>
    <figure></figure>
    <p>Select a country</p>
  </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" />
    <p>Andorra</p>
  </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" />
    <p>Bolivia</p>
  </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" />
    <p>Cambodia</p>
  </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" />
    <p>Denmark</p>
  </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" />
    <p>South Africa</p>
  </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" />
    <p>Andorra</p>
  </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" />
    <p>Bolivia</p>
  </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" />
    <p>Cambodia</p>
  </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" />
    <p>Denmark</p>
  </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" />
    <p>South Africa</p>
  <option value="andorra">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Flag_of_Andorra.svg/120px-Flag_of_Andorra.svg.png" />
    <p>Andorra</p>
  </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" />
    <p>Bolivia</p>
  </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" />
    <p>Cambodia</p>
  </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" />
    <p>Denmark</p>
  </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" />
    <p>South Africa</p>
  </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" />
    <p>Andorra</p>
  </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" />
    <p>Bolivia</p>
  </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" />
    <p>Cambodia</p>
  </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" />
    <p>Denmark</p>
  </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" />
    <p>South Africa</p>
  </option>
</selectlist>

option,
selectedoption {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 1rem;
  font-size: 1rem;
  align-items: center;
  padding: 0 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;
  }
}