current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 1 down vote favorite

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!

share|improve this question
add comment

1 Answer

up vote 0 down vote

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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