Possible to add a description to a dropdown?

Issue

I would like to ask if it is possible to create a dropdown like the following image:

The client would love for it to be like that however I checked on some of the ways and I have not found a way that works.

Solution

HI Kaygee Del Hlobo,

It is not possible to modify the internal content of the dropdown in this way with pure HTML and CSS, since the rendering of the dropdown menu select is controlled by the operating system and the browser, and does not allow custom HTML within the options.

The best way to achieve what you want is to create a custom dropdown.

<style>
  .dropdown-container {
    font-family: Arial, sans-serif;
    position: relative;
    width: 200px;
    margin: 20px;
  }
  .dropdown-btn {
    padding: 10px;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100%;
    overflow: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }
  .dropdown-content p {
    padding: 10px;
    margin: 0;
    background: #ddd;
    color: #666;
  }
  .dropdown-option {
    padding: 10px;
    text-align: left;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
  }
  .dropdown-option:hover {
    background-color: #f1f1f1;
  }
  .dropdown-option:last-child {
    border-bottom: none;
  }
  .show { display: block; }
</style>

<div class="dropdown-container">
  <div class="dropdown-btn" onclick="toggleDropdown()">Business Size</div>
  <div class="dropdown-content" id="dropdown">
    <p>This includes your staff, contract and temporary staff for your organization, business, NPO, NGO, and more.</p>
    <div class="dropdown-option" onclick="setBusinessSize('Micro (1-10)')">Micro (1-10)</div>
    <div class="dropdown-option" onclick="setBusinessSize('Small (11-50)')">Small (11-50)</div>
    <div class="dropdown-option" onclick="setBusinessSize('Medium (51-250)')">Medium (51-250)</div>
    <div class="dropdown-option" onclick="setBusinessSize('Large (251 - more)')">Large (251 - more)</div>
  </div>
</div>


<script>
function toggleDropdown() {
  var dropdownContent = document.getElementById("dropdown");
  if (dropdownContent.style.display === "block") {
    dropdownContent.style.display = "none";
  } else {
    dropdownContent.style.display = "block";
  }
}

window.onclick = function(event) {
  if (!event.target.matches('.dropdown-btn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.style.display === "block") {
        openDropdown.style.display = "none";
      }
    }
  }
}

function setBusinessSize(size) {
  var dropdownBtn = document.querySelector('.dropdown-btn');
  dropdownBtn.textContent = size;
  toggleDropdown();
}
</script>

Answered By - Juan Manuel Garcia Montealegre