如何在表单中制作选择图像

Posted 2023-03-05

【中文标题】如何在表单中制作选择图像

【英文标题】：How to make a select image in form

【发布时间】：2016-02-22 08:17:27

【问题描述】：

我需要一个带有可选图像的表单，我已经在 google 中搜索过，我尝试使用 select 选项，但这不起作用

请问您有什么办法解决这个问题吗？

我正在使用波旁威士忌和纯 (SASS)

【参考方案1】：

我会将复选框制作成图像，请参阅小提琴https://jsfiddle.net/0c26tqd7/1/

编辑我在小提琴的选中复选框上添加了一个红色边框

html

<input type="checkbox" name='thing1' id="thing1"/><label for="thing1"></label>

css

input[type=checkbox] 
    display:none;


input#thing1[type=checkbox] + label

    background-image: url("http://lorempixel.com/50/50/");
    height: 50px;
    width: 50px;
    display:inline-block;
    padding: 0 0 0 0px;

【讨论】：

+1 好答案。另外，$('#thing1').css('background-image', 'url(image.ext)'); 可以帮助动态设置图像

另外，还有一点需要注意：如果 OP 想要一次选择一个，请更改为具有相同 name 的单选按钮