How can i adjust the click-area around my checkbox? - html

Question

im currently stuck with this formating issue in my angular application.
As you can see in the attached images, there is a problem with the clickable area around my checkboxes.
I basically want to adjust the clickable area to the size of the checkbox.
In the 2nd image I highlighted the current area with a background-color: aquamarine to make it more clear.
My SCSS code looks like this. I have a feeling, that this should be an easy task, but I'm somewhat missing something in detail.
.date-checkbox {
display: inline;
float: right;
margin-right: -24px;
margin-top: -23px;
-webkit-transform: scale(2);
}
.disable-date {
opacity: 0.5;
pointer-events: none;
}
.enum-checkbox {
display: inline;
float: right;
margin-right: -24px;
margin-top: -23px;
-webkit-transform: scale(2);
}
/* The container */
.container {
cursor: pointer;
}
/* Hide the browser's default checkbox */
.container input {
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 4px;
left: 25px;
height: 15px;
width: 15px;
background-color: blue;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: blue;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: blue;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 5px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
My HTML code looks like this:
<div class="enum-checkbox">
<label class="container">
<input type="checkbox" (click)="IncludeExcludeProp(groupobject[g.PROPS.title], $event)"
title="Include in search" />
<span class="checkmark"></span>
</label>
</div>

Answer 1

Since clicking the label essentially clicks the checkbox, I would add padding or width to the label surrounding the checkbox so that it extends as far as you need your clickable area to be.
Note that, for accessibility, I've added aria-label to the checkbox. The title attribute is ignored by screen readers and the label would otherwise contain no helpful information about the checkbox.
.lbl-checkbox {
display: inline-block;
padding: 5em;
background: #eee;
}
<label class="lbl-checkbox">
<input aria-label="an appropriate label" type="checkbox">
</label>