如何在 HTML 中的下拉列表中新增圖片？

要在下拉列表中新增圖片，請在 <<a>> 標記中設定影像的圖片文字，該標記包含在 div 中 −

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

在上面的 div dropText 中，所有其他選擇項都放置有單獨的影像。dropText div 的樣式為。這也設定了選擇項的背景色，即淺藍色 −

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

下面設定選擇項（即 dropbtn）的懸停顏色，為黃色 −

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

但是，這裡是從選擇按鈕的 HTML −

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

載入時，選擇按鈕的樣式為橙色。滑鼠游標也設定為指標 −

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

示例

現在，讓我們看一個完整示例，在下拉列表中新增圖片 −

<!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://tutorialspoint.tw/cg/images/cg_python.png"
            width="20" height="20"> Python</a>
         <a href="#"><img src="https://tutorialspoint.tw/cg/images/cg_java.png"
            width="20" height="20">Java</a>
         <a href="#"><img src="https://tutorialspoint.tw/cg/images/cg_c++.png"
            width="20" height="20">C+</a>
         <a href="#">
      </div>
   </div>
</body>
</html>