How to add images in select list in HTML?

HTML Web Development Front End Technology

To add images in the select list, set the img text for the image in the <a> tag, which is enclosed in a div −

<div class="dropText">
   <a href="#">
      <img src="https://www.tutorialspoint.com/cg/images/cg_python.png"
      width="20" height="20"> Python
   </a>
   <! ---
      All other select items comes here
   !-->
</div>

In the above div dropText, all the other select items is placed with the individual images. The dropText div is styled as. This also sets the background color of the select items i.e. skyblue −

.dropText {
   display: none;
   position: absolute;
   background-color: skyblue;
   min-width: 120px;
   z-index: 1;
}

The below styles the text of the select list items −

.dropText a {
   color: black;
   padding: 12px 25px;
   text-decoration: none;
   display: block;
}

On hover any select item, which color should be visible is shown using the below style. We have set the blue color −

.dropText a:hover {
   background-color: blue;
   color: white;
}

The below sets the hover color of the select i.e. dropbtn with the yellow color −

.dropdown:hover .dropbtn {
   background-color: yellow;
}

However, here’s the select button HTML −

<button class="dropbtn">
   Select any one language
</button>

On load, the select button is styled orange color. The cursor is also set to pointer −

.dropbtn {
   background-color: orange;
   padding: 10px;
   font-size: 20px;
   cursor: pointer;
}

Example

Let us now see the complete example to add images in select list −

<!DOCTYPE html>
<html>
<head>
   <title>Select a Language</title>
   <style>
      .dropbtn {
         background-color: orange;
         padding: 10px;
         font-size: 20px;
         cursor: pointer;
      }
      .dropdown {
         position: relative;
         display: inline-block;
      }
      .dropText {
         display: none;
         position: absolute;
         background-color: skyblue;
         min-width: 120px;
         z-index: 1;
      }
      .dropText a {
         color: black;
         padding: 12px 25px;
         text-decoration: none;
         display: block;
      }
      .dropText a:hover {
         background-color: blue;
         color: white;
      }
      .dropdown:hover .dropText {
         display: block;
      }
      .dropdown:hover .dropbtn {
         background-color: yellow;
      }
   </style>
</head>
<body>
   <h1>Programming Language</h1>
   <div class="dropdown">
      <button class="dropbtn">
         Select any one language
      </button>
      <div class="dropText">
         <a href="#">
         <img src="https://www.tutorialspoint.com/cg/images/cg_python.png"
            width="20" height="20"> Python</a>
         <a href="#"><img src="https://www.tutorialspoint.com/cg/images/cg_java.png"
            width="20" height="20">Java</a>
         <a href="#"><img src="https://www.tutorialspoint.com/cg/images/cg_c++.png"
            width="20" height="20">C+</a>
         <a href="#">
      </div>
   </div>
</body>
</html>