1

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!

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.