如何使用图像而不是文本创建下拉菜单？

带有图像的下拉选择

您希望创建一个显示图像而不是文本的下拉选择。虽然经常建议使用 jQuery 组合框，但它仍然需要在图像旁边添加文本。

解决方案：用图像替换文本

令人惊讶的是，您可以在没有 JavaScript 的情况下实现此下拉菜单！操作方法如下：

HTML 结构

使用单选按钮和标签：

<div>

CSS 样式

使用 CSS 设置它们的样式。隐藏单选按钮，将标签设置为看起来像下拉选项，并使下拉菜单在悬停时展开。

#image-dropdown {
    /* Style the "box" in its minimized state */
    ...
}
#image-dropdown:hover {
    /* When expanded, the dropdown will get native means of scrolling */
    ...
}
#image-dropdown input {
    /* Hide the nasty default radio buttons */
    ...
}
#image-dropdown label {
    /* Style the labels to look like dropdown options */
    ...
}
...
#image-dropdown input:checked + label {
    /* Make the selected option visible in the collapsed menu */
    ...
}

功能

单选按钮链接到标签这样单击标签就会激活相应的单选按钮。当您将鼠标悬停在下拉列表上时，它会展开，显示所有图像选项。即使在折叠状态下，所选图像仍然可见。

示例

查看完整示例：http://jsfiddle.net/NDCSR/1/

实现细节

• 在具有相对定位和高 z-index 的容器内使用绝对定位。
• 对于不同的线条样式，使用每个标签基于其“for”属性的唯一背景图像。

以上是如何使用图像而不是文本创建下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！