带有图像的下拉选择
您希望创建一个显示图像而不是文本的下拉选择。虽然经常建议使用 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/
实现细节
以上是如何使用图像而不是文本创建下拉菜单?的详细内容。更多信息请关注PHP中文网其他相关文章!