How to make a select image in form

html forms select bourbon neat

12,894

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

12,894

cfranco

Freelance Web/UX designer and front end developer living in beautiful Monterrey, Mexico with 8+ years of experience. I specialize in UX/UI, FrontEnd development, Wordpress, Drupal and generally making things that are awesome. I am dedicated almost 24 hours of day to think about the Usability of the interfaces. I was working before as a Senior Web Developer on a Web Startup company. I'm available for freelance work in Web design, User Interface design, User Experience design and Front End development. I specialize in designing and creating websites that does not only focus on the visual interface design but it also conforms on the latest web standards.

Updated on July 13, 2022

Comments

cfranco almost 2 years

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)
Christian Gollhardt over 8 years

+1 Great Answer. Additional, $('#thing1').css('background-image', 'url(image.ext)'); could help, to set the image dynamicly
Adam Buchanan Smith over 8 years

Also, one more thing to note: If OP wants a one-at-a-time selection, change to radio buttons with the same name