How to add padding to wrap under custom checkbox?

byMR

September 1, 2022

I have a form with some checkboxes that I have replaced the checkbox with a custom version.

The only issue I am facing now is that I am getting some unwanted wrapping of text underneath the checkbox itself.

How can one get around this? I am wanting a CSS-only solution if possible.

I am open to re-writing the css if needs be.

.container {
  width: 200px;
  background: lightgrey;
}

.form-group:not(:last-of-type) {
  margin-bottom: 16px;
}

.form-group > input[type="checkbox"] {
  display: none;
}
.form-group > input[type="checkbox"] + *::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border: 2px solid #9E9E9E;
  border-radius: 4px;
  flex-shrink: 0;
}

.form-group > input[type="checkbox"]:checked + *::before {
  box-sizing: border-box;
  padding-top: 2px;
  content: "\2714";
  color: white;
  text-align: center;
  background: #005DA1;
  border-color: #005DA1;
}

<div class="container">
  <div class="form-group">
    <input type="checkbox" id="my-checkbox"/>
    <label for="my-checkbox">some label</label>
  </div>
    <div class="form-group">
    <input type="checkbox" id="my-checkbox"/>
    <label for="my-checkbox">some extremely long label that must be accounted for</label>
  </div>
</div>

>Solution :

Just add display: flex; to the label tag

.container {
  width: 200px;
  background: lightgrey;
}

.form-group:not(:last-of-type) {
  margin-bottom: 16px;
}

.form-group > input[type="checkbox"] {
  display: none;
}
.form-group > input[type="checkbox"] + *::before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border: 2px solid #9E9E9E;
  border-radius: 4px;
  flex-shrink: 0;
}

.form-group > input[type="checkbox"]:checked + *::before {
  box-sizing: border-box;
  padding-top: 2px;
  content: "\2714";
  color: white;
  text-align: center;
  background: #005DA1;
  border-color: #005DA1;
}
.form-group > input[type="checkbox"] + label {
   display: flex;
}

<div class="container">
  <div class="form-group">
    <input type="checkbox" id="my-checkbox"/>
    <label for="my-checkbox">some label</label>
  </div>
    <div class="form-group">
    <input type="checkbox" id="my-checkbox"/>
    <label for="my-checkbox">some extremely long label that must be accounted for</label>
  </div>
</div>