0

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>

check box image

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.

Yuan
  • 462
  • 4
  • 12
  • Lots of resources in the duplicate link you can work from even though the specific requirements are slightly different. The box can be styled to not be visible and use css selectors like `input:checked + label` for your text – charlietfl Jul 04 '20 at 17:56
  • @charlietfl Thank you very much. After 2 hour search, I finally find a neat solution. – Yuan Jul 04 '20 at 19:13
  • Good to hear. Lots of creative ways to present checkboxes these days – charlietfl Jul 04 '20 at 19:23

0 Answers0