0

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;
}
Community
  • 1
  • 1
Nate Lockwood
  • 2,183
  • 5
  • 22
  • 30
  • 2
    possible duplicate of [How to align checkboxes and their labels consistently cross-browsers](http://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) – Rob Sep 10 '15 at 18:30

1 Answers1

1

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>
Joseph Marikle
  • 68,672
  • 14
  • 103
  • 120
  • OK, I'm getting the bigger picture now and see that adding a bottom margin in .checkbox label { ... will serve to separate any subsequent rows. That's a well presented answer. – Nate Lockwood Sep 10 '15 at 20:20