---

CSS

.custom-dropdown li {
  cursor: pointer;
  transition: all 420ms ease-in-out;
}

.custom-dropdown li:hover {
  font-size: 1.2rem;
  letter-spacing: 5px;
}

[data-input-dropdown] {
  cursor: pointer;
}

Javascript

const inputDropdowns = [...document.querySelectorAll('[data-input-dropdown]')];

inputDropdowns.forEach((dropdown) => {
  const dropdownmenus =
    dropdown.nextElementSibling.querySelectorAll(`[data-value]`);
  dropdownmenus.forEach((menu) => {
    menu.addEventListener('click', () => {
      dropdown.value = menu.dataset.value;
      menu.dataset.background &= dropdown.style.backgroundColor =
        menu.dataset.background;
    });
  });
});

HTML

<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="d-flex flex-column btn-group">
        <div class="input-group">
          <span class="input-group-text">Color</span>
          <input
            type="text"
            class="form-select"
            data-bs-toggle="dropdown"
            data-bs-display="static"
            placeholder="make your choice"
            name="test"
            readonly
            required
            data-input-dropdown
          />
          <ul class="dropdown-menu dropdown-menu-start w-100 custom-dropdown">
            <li
              class="bg-success-subtle px-2"
              data-value="Green"
              data-background="var(--bs-success-bg-subtle)"
            >
              Green
            </li>
            <li
              class="bg-danger-subtle px-2"
              data-value="Red"
              data-background="var(--bs-danger-bg-subtle)"
            >
              Red
            </li>
            <li
              class="bg-warning-subtle px-2"
              data-value="Yellow"
              data-background="var(--bs-warning-bg-subtle)"
            >
              Yellow
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>