Associate an image with each checkbox

Question

I'd like to have a graphics-oriented Webform, wherein the user will select from check boxes that have a specific image associated with each. For instance, I might have a row of checkboxes with a color swatch above each one, like this:

[red jpg color swatch] [blue jpg color swatch] [green jpg color swatch] [checkbox].................[checkbox]..................[checkbox]

How can I accomplish that using the Webform module?

Thanks!

Answer 1

I used this CSS technique to make checkboxes larger and add background images unique to each checkbox. Sample LESS Code:

#edit-field-vegetables {

  input[type='checkbox'] {
    -webkit-appearance:none;
    width:70px;
    height:70px;
    background: url('../img/vegetables_icons_long.png') no-repeat;
  }
  input[type='checkbox']:checked {
    opacity: 0.5;
  }

  .form-type-checkbox{
    display: block;
    width:110px; height:110px;
    position: relative;
    float:left;
    input.form-checkbox{
      float:right;
      position: absolute;
      top:40px;
    }
  }

  .form-item-field-vegetables-und-orange input {
    background-position: 0 -753px;
  }
  .form-item-field-vegetables-und-banana input{
    background-position: 0 -1415px;
  }
  .form-item-field-vegetables-und-apple input{
    background-position: 0 -80px;
  }
}

This works on chrome. Look at the discussion linked above to see how to make it cross-browser.