将图像与每个复选框关联起来

Question

我想有一个面向图形的Webform，其中用户将选择从复选框，有一个特定的图像与每一个。例如，我可能有一行复选框，每个复选框的上方都有一个颜色样本，如下所示：

红色jpg色块 绿色jpg色块.................复选框..................复选框

我如何使用Webform模块来完成这个任务？

谢谢!

Answer 1

我使用这种CSS技术使复选框更大，并添加每个复选框特有的背景图像。减去样本代码：

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

这在镀铬上有效。查看上面链接的讨论，了解如何使其跨浏览器。