Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add images in select list in HTML?
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>
Output
Now, keep the mouse cursor on the dropdown and select a value −
10K+ Views
