P粉974462439 2023-08-01 18:01:00 0 1 235
我试图实现一种设计,其中选择输入显示图像列表从中挑选。
<select name="choose-image"> <option value="" disabled selected>Choose your image</option> <option value="Smiling"><img src={image} alt="local-avatar" /></option> <option value="Sad">Sad</option> </select>
第二个选项不显示任何东西,即使它做了,我需要样式下拉列表,我仍然不确定如何。感谢任何帮助。谢谢。
P粉549986089 采纳为最佳 2023-08-02 16:53:24 1楼
在HTML中不支持在元素的标签中直接使用图像。第二个选项不显示任何内容的原因是
标记的目的是纯文本,而不是HTML元素。要实现想要显示供选择的图像列表的设计,可以使用HTML、CSS和JavaScript使用自定义选择下拉菜单。有几个可用的库和插件可以帮助您实现这一点,例如Select2、Chosen或使用CSS和JavaScript的自定义实现。下面是一个如何用图片创建自定义选择下拉菜单的例子:
超文本标记语言
CSS:
JavaScript :
在本例中,您可以将{image_url}替换为您想要显示的图像的实际url。当用户单击自定义选择时,它将显示图像列表,当用户选择图像时,它将相应地更新所选选项。请记住,这是一个基本示例,您可能需要根据特定需求和样式首选项调整CSS和JavaScript。此外,对于更复杂的应用程序,可以考虑使用React或Vue.js等前端框架。
赞 +0 添加回复