Custom Checkbox Button Issue - css

Question

I´m trying to make a custom checkbox buttons that when clicked on will change its color as an indicator that they are active. I got up the point where its almost done but the checkbox is appearing left of the box instead of being the button itself. I can't find out how to do this.
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;
}
<input type="checkbox" name="test" /><label>Text goes here</label></input>

Answer 1

You can do it as follows it will solve your problem:
Add a for the attribute in the label and set an id attribute in the input type this will bind both the elements and you can get the desired result.
<input id="my_checkbox" type="checkbox" name="test" />
<label for="my_checkbox">
Text goes here
</label>
</input>
Here I have put an id="my_checkbox" to the the checkbox input and added in the for="my_checkbox" attr.

Answer 2

input[type=checkbox] {
width: auto;
height: 20px;
cursor: pointer;
position: absolute;
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;
}
<input type="checkbox" name="test"><label>Text goes here</label></input>