Heute zeige ich euch wie ihr so ein langweiliges Drop Down Element in einem Formular mit einem Icon erweitern könnt. Je nach Auswahl im Drop Down verändert sich das Icon. Ein kleiner Trick mit grosser Wirkung.

Video

HTML

<div class="select-container">
      <div class="flag-icon">🇨🇭</div>
      <select class="custom-select" id="country-select">
        <option value="ch" selected>Schweiz</option>
        <option value="de">Deutschland</option>
        <option value="at">Österreich</option>
        <option value="li">Liechtenstein</option>
        <option value="us">USA</option>
        <option value="it">Italien</option>
      </select>
</div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f5f5f5;
}

.select-container {
  position: relative;
  width: 300px;
}

.custom-select {
  width: 100%;
  padding: 12px 15px;
  padding-left: 60px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 12px;
  appearance: none;
  background-color: white;
  cursor: pointer;
}

.select-container:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #666;
  pointer-events: none;
}

.flag-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  line-height: 1;
}

JS

const select = document.getElementById("country-select");
      const flagIcon = document.querySelector(".flag-icon");
      const flagEmojis = {
        ch: "🇨🇭",
        de: "🇩🇪",
        at: "🇦🇹",
        li: "🇱🇮",
        us: "🇺🇸",
        it: "🇮🇹",
      };

      select.addEventListener("change", function () {
        flagIcon.textContent = flagEmojis[this.value];
      });