Custom Checkbox Button Issue

I´m trying to make a custom checkbox buttons that when clicked on will change its color as indicator that they are active. I got up the point where its almost done but the the checkbox is appearing left of the box instead of being the button itself. I can't find out how to do this.

My current HTML:

<input type="checkbox" name="test" /><label>Text goes here</label></input>

CSS

input[type=checkbox] {
    width: auto;
    height: 20px;
    cursor: pointer;    
    position: relative;
    opacity: 0;
    z-index: 9999;

}

input[type=checkbox] + label {
    font-family: "Aharoni";
    display: inline-block;
    background: #dcdcdc;
    color: black;
    font-size: 12px;  
    font-weight: 400;
    text-align: center;

    border: solid 1px #a8a8a8;
    border-bottom-color: black;
    border-radius: 0px;

    width: auto;
    height: 20px;
    padding-left:5px;
    padding-right:5px;
    cursor: pointer;    
    position: relative;

}

input[type=checkbox]:checked + label,
input[type=checkbox]:active + label {
    background:gray;    
    color:white;
}