Article Categories

Selected Reading

How to add images in select list in HTML?

HTML Web Development Front End Technology

HTML does not natively support images in <select> dropdown lists. However, we can create a custom dropdown using HTML, CSS, and JavaScript that mimics the behavior of a select list while displaying images alongside text options.

Why Custom Dropdowns?

The standard HTML <select> element only accepts text content in its <option> tags. To include images, we must build a custom solution using divs, buttons, and CSS styling that provides the same user experience as a native select dropdown.

Basic Structure

A custom image dropdown consists of three main components

Dropdown Button The clickable button that shows the selected option
Dropdown Content The hidden container holding all selectable options
Option Items Individual links containing images and text

Following is the basic HTML structure

<div class="dropdown">
   <button class="dropbtn">Select Option</button>
   <div class="dropText">
      <a href="#">
         <img src="image.png" width="20" height="20"> Option Text
      </a>
   </div>
</div>

CSS Styling for Custom Dropdown

The CSS controls the dropdown's appearance and behavior. Here are the essential styles

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

.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;
}

Method 1 Hover-based Dropdown

This approach shows the dropdown when the user hovers over the button. The dropdown automatically hides when the mouse moves away.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Image Select List - Hover Method</title>
   <style>
      body { font-family: Arial, sans-serif; padding: 20px; }
      .dropbtn {
         background-color: orange;
         padding: 10px 15px;
         font-size: 18px;
         cursor: pointer;
         border: none;
         border-radius: 4px;
      }
      .dropdown {
         position: relative;
         display: inline-block;
      }
      .dropText {
         display: none;
         position: absolute;
         background-color: #f9f9f9;
         min-width: 200px;
         box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
         z-index: 1;
         border-radius: 4px;
      }
      .dropText a {
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
         border-bottom: 1px solid #ddd;
      }
      .dropText a:hover {
         background-color: #4CAF50;
         color: white;
      }
      .dropdown:hover .dropText {
         display: block;
      }
      .dropdown:hover .dropbtn {
         background-color: #ff6600;
      }
      .dropText img {
         vertical-align: middle;
         margin-right: 8px;
      }
   </style>
</head>
<body>
   <h2>Select Programming Language</h2>
   <div class="dropdown">
      <button class="dropbtn">Choose Language</button>
      <div class="dropText">
         <a href="#">
            <img src="/html/images/python-mini-logo.jpg" width="20" height="20"> Python
         </a>
         <a href="#">
            <img src="/html/images/java-mini-logo.jpg" width="20" height="20"> Java
         </a>
         <a href="#">
            <img src="/html/images/javascript-mini-logo.jpg" width="20" height="20"> JavaScript
         </a>
         <a href="#">
            <img src="/html/images/cpp-mini-logo.jpg" width="20" height="20"> C++
         </a>
      </div>
   </div>
</body>
</html>

The output displays a button that reveals image options on hover

Choose Language [dropdown button]
(On hover shows: Python, Java, JavaScript, C++ with respective icons)

Method 2 Click-based Dropdown with JavaScript

This method uses JavaScript to toggle the dropdown visibility on button clicks, providing more control over the dropdown behavior.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Image Select List - Click Method</title>
   <style>
      body { font-family: Arial, sans-serif; padding: 20px; }
      .dropbtn {
         background-color: #3498db;
         color: white;
         padding: 12px 20px;
         font-size: 16px;
         border: none;
         cursor: pointer;
         border-radius: 4px;
         min-width: 200px;
      }
      .dropdown {
         position: relative;
         display: inline-block;
      }
      .dropText {
         display: none;
         position: absolute;
         background-color: white;
         min-width: 200px;
         box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
         z-index: 1;
         border: 1px solid #ccc;
         border-radius: 4px;
         top: 100%;
      }
      .dropText a {
         color: black;
         padding: 12px 16px;
         text-decoration: none;
         display: block;
         border-bottom: 1px solid #f1f1f1;
      }
      .dropText a:last-child {
         border-bottom: none;
      }
      .dropText a:hover {
         background-color: #f1f1f1;
      }
      .dropText img {
         vertical-align: middle;
         margin-right: 10px;
      }
      .show {
         display: block;
      }
   </style>
</head>
<body>
   <h2>Click to Select Language</h2>
   <div class="dropdown">
      <button class="dropbtn" onclick="toggleDropdown()" id="dropButton">
         Select Language ?
      </button>
      <div class="dropText" id="myDropdown">
         <a href="#" onclick="selectOption('Python')">
            <img src="/html/images/python-mini-logo.jpg" width="24" height="24"> Python
         </a>
         <a href="#" onclick="selectOption('Java')">
            <img src="/html/images/java-mini-logo.jpg" width="24" height="24"> Java
         </a>
         <a href="#" onclick="selectOption('JavaScript')">
            <img src="/html/images/javascript-mini-logo.jpg" width="24" height="24"> JavaScript
         </a>
         <a href="#" onclick="selectOption('C#')">
            <img src="/html/images/csharp-mini-logo.jpg" width="24" height="24"> C#
         </a>
      </div>
   </div>
   <p id="result"></p>

   <script>
      function toggleDropdown() {
         document.getElementById("myDropdown").classList.toggle("show");
      }
      
      function selectOption(language) {
         document.getElementById("dropButton").innerHTML = language + " ?";
         document.getElementById("result").innerHTML = "Selected: " + language;
         document.getElementById("myDropdown").classList.remove("show");
      }
      
      // Close dropdown when clicking outside
      window.onclick = function(event) {
         if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropText");
            for (var i = 0; i < dropdowns.length; i++) {
               var openDropdown = dropdowns[i];
               if (openDropdown.classList.contains('show')) {
                  openDropdown.classList.remove('show');
               }
            }
         }
      }
   </script>
</body>
</html>

This creates an interactive dropdown that updates the button text and shows the selection

Select Language ? [clickable button]
Selected: (shows chosen option after selection)

Key Points

Image sizing Keep images small (20-30px) for better dropdown appearance
Positioning Use position: relative on the dropdown container and position: absolute on the content
Z-index Set higher z-index values to ensure dropdown appears above other elements
Accessibility Consider adding keyboard navigation and ARIA attributes for screen readers
Mobile responsiveness Test on mobile devices as hover events work differently on touch screens

Browser Compatibility

Custom dropdowns with CSS and JavaScript work in all modern browsers including Chrome, Firefox, Safari, and Edge. The hover method requires CSS :hover support, while the click method needs JavaScript enabled.

Method	Pros	Cons
Hover-based

AmitDiwan

Updated on: 2026-03-16T21:38:54+05:30

13K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next

Article Categories

How to add images in select list in HTML?

Why Custom Dropdowns?

Basic Structure

CSS Styling for Custom Dropdown

Method 1 Hover-based Dropdown

Example

Method 2 Click-based Dropdown with JavaScript

Example

Key Points

Browser Compatibility

Learn More in Our Tutorials

Kickstart Your Career