Dropdown list to Include Images or Icons-CodePudding

I want to add specific icons or png's to the dropdown list next to the text. Firefox no longer supports a background-image style inline to do this. I have looked around but all the ways are outdated.

This is the codepen link with an example Link

The code is this if needed.

HTML

<div>
  
<select>
  <option value="Cat">
    <img src="https://www.w3schools.com/images/lamp.jpg" alt="cat icon">
    Cat</option>
  <option value="Dog">
    <img src="https://www.w3schools.com/images/lamp.jpg" alt="dog icon">
    Dog</option>
  <option value="Bird">
    <img src="https://www.w3schools.com/images/lamp.jpg" alt="bird icon">
    Bird</option>
  <option value="Mouse">
    <img src="https://www.w3schools.com/images/lamp.jpg" alt="mouse icon">
    Mouse</option>
</select>
  
</div>

CSS

select {
  padding: 5px 25px;
  font-size: 20px;
  border: none;
  background:grey;
  border-radius: 5px;
  color: azure;
}

div{
  position: absolute;
  top:20%;
  width:100%;
  left: 50%;
  margin: auto 0;
}

CodePudding user response：

What i would advice you to do is not to use a <select> as a menu, but a <div> with <a> tags or a <ul> with <li> tags, here's a working example:

<div >
  <button onclick="myFunction()" >Dropdown</button>
  <div id="myDropdown" >
    <a href="#">image<br><img src="https://www.w3schools.com/images/lamp.jpg"></a>
    <a href="#">font awesome<br><i ></i></a>
  </div>
</div>

Here is the whole code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
</head>
<body>

<div >
  <button onclick="myFunction()" >Dropdown</button>
  <div id="myDropdown" >
    <a href="#">image<br><img src="https://www.w3schools.com/images/lamp.jpg"></a>
    <a href="#">font awesome<br><i ></i></a>
  </div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</body>
</html>

CodePudding user response：

if possible then add Font-Awesome() by replacing .

CodePudding user response：

You could use divs and Javascript:

    let dropdown = document.querySelector(".dropdown");
    let selectCountry = dropdown.querySelector(".select-country");
    let options = dropdown.querySelector(".options");
    let optionItems = options.querySelectorAll("div");
    
    const toggleDropdown = () => {
        if (window.getComputedStyle(options).display == "none") {
            options.style.display = "block";
        }
        else {
            options.style.display = "none";
        }           
    }   
    selectCountry.addEventListener("click", toggleDropdown);
    
    
    const chooseOption = (option) => {
        console.log(option.getAttribute("data-value")); 
        toggleDropdown();
    }
    optionItems.forEach(function(option, i) {
        option.addEventListener("click", function(){chooseOption(option)});
    });
    
    const closeDropdown = (e) => {
        if (e.target.parentNode.className !== "dropdown") {
            options.style.display = "none";
        }
    }
    document.addEventListener("click", closeDropdown);

.dropdown {
    width: 200px;   
    background-color: #fff;
    border: 1px solid #e2e2e2;
}
.dropdown .options {
    display: none;  
}
.dropdown .options div {
    position: relative; 
    height: 30px;
    padding: 5px 5px 5px 50px;
    cursor: pointer;
    line-height: 30px;
}
.dropdown .options div:nth-of-type(2n 1){
    background-color: #efefef;
}
.dropdown .options div:before {
    content: "";
    width: 32px;
    height: 24px;
    background-image: url(https://i.ibb.co/3C5F68J/flags.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 5px;
    top: 8px;   
}
.dropdown .options div.sp:before {
    background-position: 0 0;
}
.dropdown .options div.en:before {
    background-position: 0 -47px;;
}
.dropdown .options div.fr:before {
    background-position: 0 -95px;
}
.dropdown .options div.it:before {
    background-position: 0 -143px;
}
.dropdown div.select-country {
    position: relative; 
    height: 30px;
    padding: 5px 50px 5px 5px;
    cursor: pointer;
    line-height: 30px;
    border: 1px solid #e2e2e2;
}
.dropdown div.select-country:before {
    content: "";
    width: 32px;
    height: 24px;
    background-image: url(https://i.ibb.co/3C5F68J/flags.png);
    background-repeat: no-repeat;
    background-position: 0 -191px;
    position: absolute;
    right: 5px;
    top: 8px;   
}

<div >
    <div >-- select contry --</div>
    <div >
        <div  data-value="sp">Spain</div>
        <div  data-value="en">England</div>
        <div  data-value="fr">France</div>
        <div  data-value="it">Italy</div>
    </div>
</div>