How to allign a zoomed checkbox with a label-CodePudding

I have the following html which renders the following

<input type="checkbox" class='btn-filter' style='zoom:2; id="inactive-accounts" name="" value="1">
<label style= 'font-size:15px' for="inactive-accounts">Show Inactive Accounts</label><br>

If the checkbox is a regular size the text lines up well with the checkbox but since I am using zoom to increase the size of the checkbox it is not aligned correctly. I tried a solution I found on stack overflow to create CSS like so:

    .checkboxes label {
    display: inline-block;
    padding-right: 10px;
    white-space: nowrap;
}

.checkboxes input {
    vertical-align: middle;
    zoom:"2"
}

.checkboxes label span {
    vertical-align: middle;
}

<input type="checkbox" class='btn-filter' style='zoom:2; justify-content:center' id="inactive-accounts" name="" value="1">
<label style= 'font-size:15px' for="inactive-accounts">Show Inactive Accounts</label><br>

but this does not fix the issue. Could it be that I should not be using zoom to increase the size of the checkbox here?

CodePudding user response：

I highly discourage using the property ZOOM. To increase the element, it is better to use - transform.

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

.checkboxes {
    outline: 1px solid green;
    padding: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
}
.checkboxes input, .checkboxes label {
    margin: 0;
    min-height: 20px;
    display: flex;
    align-items: center;
}
.checkboxes label {
    white-space: nowrap;
        margin-left: 7px;
        outline: 1px solid grey;
        padding-left: 5px;
}
.checkboxes input {
        transform: scale(2);
        outline: 1px solid grey;
}
.checkboxes label span {
    vertical-align: middle;
}

<div >
    <input type="checkbox" id="inactive-accounts" name="" value="1">
    <label for="inactive-accounts">Show Inactive Accounts</label>
</div>

CodePudding user response：

Are you free to wrap your elements in a div or "container" element? If so, you can set display: flex; and align-items: center; onto that element, which would align your input and label.

Here's a snippet showing both a regular and zoomed checkbox alongside a label.

div {
  display: flex;
  align-items: center;
}

<div>
  <input type="checkbox" class='btn-filter' style='zoom:2; justify-content:center' id="inactive-accounts" name="" value="1">
  <label style='font-size:15px' for="inactive-accounts">Show Inactive Accounts</label>
</div>
<br>

<div>
  <input type="checkbox" class='btn-filter' style='zoom:1; justify-content:center' id="inactive-accounts-2" name="" value="1">
  <label style='font-size:15px' for="inactive-accounts-2">Show Inactive Accounts</label>
</div>