如何使用<form：checkboxes>创建自定义复选框

Question

我正在尝试为自己创建一个自定义复选框，但找不到方法。每次输入后，我都尝试过一次跨度，但是我没有成功。这是我所拥有的：

<sf:checkboxes items="${categories }" itemValue="id"
    itemLabel="genre" path="categories"
    element="span class='checkbox'" />

CSS类：

.checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

 .checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
} 

.checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.checkbox label {
    padding-left: 5%;
}

我们非常感谢您的帮助。