How to create a custom checkbox with

I'm trying to create a custom checkbox for my but cannot find a way. I tried to sneak a span after every input but I haven't succeeded doing so. Here is what I have:

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

CSS classes:

.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%;
}

Help is highly appreciated.