Clash Royale CLAN TAG#URR8PPP

Difference between Checkbox Field Inside Label and div?

Above Image shows u a checkbox inside label. Here, when I click the empty space other than the checkbox, the checkbox is checked. However, if I use the div element instead of the label and click the empty space, the checkbox is untouched. Whats the difference between label and div in this scenario!!!

HTML Code:

<div class="card">
<h1>Fancy Checkbox</h1>
<label class="fancy-checkbox">
<input type="checkbox">
<i></i>
</label>


CSS Code:

@import url('https://fonts.googleapis.com/css?family=Work+Sans:200');
*,*::after
box-sizing:border-box;

.card
width: 600px;
margin: 30px auto;
padding: 20px 15px;
border-radius:4px;
display:flex;
flex-direction:column;
align-items:center;
font-family: Work Sans;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.3);


.fancy-checkbox
position:relative;
margin:15px 0px;
overflow:hidden;
display:block;

input
position:absolute;
visibility:hidden;

input + i
width:100px;
height:40px;
border:2px solid #ccc;
float:left;
padding: 2px;
border-radius:20px;
transition: all 0.25s;


input + i::after
content:"";
width:50%;
height:100%;
background-color:#ccc;
float:left;
border-radius:20px;
transition: all 0.25s;



I tried to use div instead of the label but not checking the checkbox.

1 Answer
1

The <label> element is a bit special and can be linked to <input> elements.

<label>

<input>

As quoted from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

The label text is not only visually associated with its corresponding
text input; it is programmatically associated with it too. This means
that for example a screenreader will read out the label when the user
is focused on the form input, making it easier to what data should be
entered.

Because the input has a label associated with it, you can click the
label to focus/activate the input, as well as the input itself. This
increased hit area provides advantages to anyone using a mouse to
activate the input.

To associate the with an element in the above style,
you need to give the an id attribute. The then needs a
for attribute whose value is the same as the input's id.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.