How to make full custom checkbox / div clickable - not just shortcut + input

Question

I have custom checkboxes that I called buttons. When you click a label or enter a div, it changes color. However, only shortcut and input are available for clicks.

Is there a way to do all the press of a div button / button (i.e. everything inside the border)?

Here is my code:

div.label { border:solid 1px gray; line-height:40px; height:40px; width: 250px; border-radius:40px; -webkit-font-smoothing: antialiased; margin-top:10px; font-family:Arial,Helvetica,sans-serif; color:gray; text-align:center; } label { display:inline; text-align:center; } input[type=checkbox] { display: none; } input:checked + div { border: solid 1px red; color: #F00; } input:checked + div:before { content: "\2713"; } 

 <input id="lists[Travel]" type="checkbox" name="lists[Travel]" /> <div class="label"> <label for="lists[Travel]">Travel</label> <br> </div> 

Answer 1

The answer is quite simple: you do not need an additional div -element. In fact, you can place the label -element anywhere and associate it with the input -element of your choice.

• <label> can be associated with a control by placing the control inside the element or using the for attribute. Such a control is called a labeled label control. One input can be associated with multiple tags.
• Labels themselves are not directly related to forms. They are indirectly associated with forms through the controls with which they are associated.
• If you click or click <label> and it is associated with a form control, the resulting click event is also raised for the corresponding control.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

 label { display:block; border:solid 1px gray; line-height:40px; height:40px; width: 250px; border-radius:40px; -webkit-font-smoothing: antialiased; margin-top:10px; font-family:Arial,Helvetica,sans-serif; color:gray; text-align:center; } input[type=checkbox] { display: none; } input:checked + label { border: solid 1px red; color: #F00; } input:checked + label:before { content: "\2713 "; } /* new stuff */ .check { visibility: hidden; } input:checked + label .check { visibility: visible; } input.checkbox:checked + label:before { content: ""; } 

 <input id="lists[Travel]" type="checkbox" name="lists[Travel]" /> <label for="lists[Travel]">Travel with jump</label> <!-- alternatively avoid jumps between text of state checked and unchecked --> <input class="checkbox" id="lists[new]" type="checkbox" name="lists[new]" /> <label for="lists[new]"><span class="check">✓</span> Travel without jump</label> 

Alternatively, you can play with display: block <label> . But it should be pretty simple if you specify float: left , display: inline-block or something else to get the desired floating point elements.

CODEPEN