How to make a select image in form

cfranco picture cfranco · Nov 20, 2015 · Viewed 10.7k times · Source

I need a form with images selectables, I´ve serched in google and I try with select option but this not working

Can you give any idea to resolve this please?

I am using bourbon & neat (SASS)

enter image description here

Answer

Adam Buchanan Smith picture Adam Buchanan Smith · Nov 20, 2015

I would make check boxes into images, see fiddle https://jsfiddle.net/0c26tqd7/1/

edit I added a red border on checked check boxes in the fiddle

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;
}