CODEWITHSUNDEEP
htmlcss
Nate Lockwood
Nate Lockwood

Reputation: 3665

How to use CSS to align a custom check box with its label?

I have added some custom, larger, check boxes to my page but the labels do not align vertically with check boxes. None of the solutions I've found using Google works. I'm looking for an HTML/CSS solution and I'm a web page novice.

What am I missing?

EDIT: I did indeed attempt to use the solution and other proposed solutions in the popular post another question but the solutions are for a simple checkbox and I'm using a custom checkbox. I've spent a couple hours attempting to fold that and other solutions on that post and other posts into my HTML and CSS but the checkbox and the label remain in lockstep with the label aligned to the the top of the checkbox. My code is demonstrably more complex than the examples and I do not understand how to incorporate any of the suggested solutions.

An HTML snippet: 

 <div class="checkbox">
   <input id="check1" type="checkbox" name="check" class=misc-chk-btn value="check1">
   <label for="check1">/dev/media/usb0&nbsp;BACKUP1</label>
   <input id="check2" type="checkbox" name="check" class=misc-chk-btn value="check2">
   <label for="check2">/dev/media/usb0&nbsp;no&nbsp;label</label>
 </div>

CSS:

input[type=checkbox] { display: none;}

.checkbox label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    margin-right: 15px;
    font-size: 1.1em;

}

.checkbox label:before {
    content: "";
    display: inline-block;

   /* size the check boxes */
    width: 24px; 
    height: 24px;

    border-radius: 6px; 
    margin-right: 10px;
    position: absolute;
    top: 4px;
    left: 4px;
    bottom: 1px;
    background-color: #afa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

input[type=checkbox]:checked + label:before {
    content: "\2713";  /* check char */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 1.1em;
    color: black;
    text-align: center;
    line-height: 24px;
}

Upvotes: 0

Views: 1712

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

You're absolutely positioning the checkbox. Can't you just leave it display:inline and add vertical-align:middle?

input[type=checkbox] { display: none;}

.checkbox label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    /*padding-left: 30px; Probably not needed anymore */
    margin-right: 15px;
    font-size: 1.1em;

}

.checkbox label:before {
    content: "";
    display: inline-block;

   /* size the check boxes */
    width: 24px; 
    height: 24px;

    border-radius: 6px; 
    margin-right: 10px;
    /*  this stuff is unnecessary
    position: absolute;
    top: 4px;
    left: 4px;
    bottom: 1px; */
    background-color: #afa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);

    /*just use vertical align*/
    vertical-align: middle;
}

input[type=checkbox]:checked + label:before {
    content: "\2713";  /* check char */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    font-size: 1.1em;
    color: black;
    text-align: center;
    line-height: 24px;
}
<div class="checkbox">
   <input id="check1" type="checkbox" name="check" class=misc-chk-btn value="check1">
   <label for="check1">/dev/media/usb0&nbsp;BACKUP1</label>
   <input id="check2" type="checkbox" name="check" class=misc-chk-btn value="check2">
   <label for="check2">/dev/media/usb0&nbsp;no&nbsp;label</label>
 </div>

Upvotes: 1

Related Questions