Custom dropdown box using javascript and css

Question

Is it possible to create a custom dropdown box using JavaScript and CSS?

For this, I need to place a background image for the dropdown box using JavaScript.

Give any suggestions without using jQuery.

Answer 1

yes you have to do below code to apply this

document.addEventListener("click", function(event) {
  var dropdown = document.getElementsByClassName("newdropdown-selecetd")[0];
  var dropdownContent = document.getElementById("dropdown-content");
  var dropdownBtn = document.getElementById("dropdown-btn");

  if (!dropdown.contains(event.target)) {
    dropdownContent.classList.remove("show");
  }
});

function toggleDropdown() {
  var dropdownContent = document.getElementById("dropdown-content");
  dropdownContent.classList.toggle("show");
}

function selectOption(option) {
  document.getElementById("dropdown-btn").textContent = option;
  toggleDropdown(); // Close the dropdown after selecting an option
}

.newdropdown-selecetd {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f5fcff;
  min-width: 160px;
      border: 1px solid #1aa0e2 ;
  z-index: 1;
  border-radius: 3px;
}

.dropdown-content a {
    color: #5e7891;
    padding: 5px 10px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {
    color: #1aa0e2;
}
.dropdown-content.show {
  display: block;
}
.active-one {
  background: #aba8a8;
  color: #fff !important;
}
.dropdown-content a.active-one:hover {
  background: #aba8a8;
  color: #fff !important;
}
span#dropdown-btn {
    position: relative;
    color: #5e7891;
    padding: 8px 10px;
    border: 1px solid #0083cc;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    height: 11px;
    background-color: #f5fcff;
    font-size: 14px;
    font-family: 'Roboto Condensed', Arial,'Nimbus Sans L','Helvetica CY',sans-serif;
    line-height: 12px;
    width: 152px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 38px;
    max-width: 152px;
    box-sizing: border-box;
    height: 29px;
      border-radius: 4px;
}

span#dropdown-btn:before {
    content: "";
    background: #1aa0e2;
    height: 27px;
    width: 31px;
    position: absolute;
    right: 0;
    top: 0;
    border-left: 1px solid #0083cc;
}
span#dropdown-btn:after {
    position: absolute;
    content: "";
    top: 12px;
    right: 10px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-color: #fff transparent transparent;
}

<div class="newdropdown-selecetd">
  <span class="dropbtn" id="dropdown-btn" onclick="toggleDropdown()">Dropdown </span>
  <div class="dropdown-content" id="dropdown-content">
    <a href="#" onclick="selectOption('Option 1')">Option 1</a>
    <a href="#" onclick="selectOption('Option 2')" class="active-one">Option 2</a>
    <a href="#" onclick="selectOption('Option 3 with long name')">Option 3 with long name</a>
    <a href="#" onclick="selectOption('Option 4')">Option 4</a>
    <a href="#" onclick="selectOption('Option 5')" class="active-one">Option 5</a>
  </div>
</div>

Answer 2

Here is a good tutorial on creating custom drop-down.

JQTransform (as suggested by Olafur) is sufficient for me. But if you need more control such as adding icons, it's worth looking at the tutorial.

Answer 3

This might be overkill; but SproutCore gives you input elements composed from images instead of from native HTML elements. There are probably other frameworks that do similar things.

The basic idea is to create a div or something, as CrazyJugglerDrummer suggests, and put click handlers on it. The handlers set up animation to mimic a select element. And when one of your pseudo-select items is selected, you use JavaScript to send that value to an actual select or input element that is hidden.

Answer 4

You can check out jQTransform