how to hide the "box" of a check box and only keep the word lable [duplicate]

I want to build a form with many checkboxes and wonder how to hide those small boxes and only keep the label words, so that the form could look clean.

<input type="checkbox" id="box_1" name="samplebox" value="val_1">
<lable for="box_1">box_text</lable>

The code above is a regular checkbox with a small box that appears ahead of the label word. Is there any way to hide the small box and only leave the word to function? My final goal is to use a word color change to reflect whether the checkbox element is checked and use javascript to submit the value.

It might be tricky and I searched the web and it seems nobody ever tried this. Thank you in advance.