如何在 HTML 的选择列表中添加图片?

htmlweb developmentfront end technology更新于 2024/7/25 16:44:17

要在选择列表中添加图片，请在 <a> 标签中设置图片的 img 文本，该标签包含在一个 div 中 -

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