How to add padding to wrap under custom checkbox?

Question

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>

What is to achieve here? Do you want next lines to be horizontally alligned with the first line instead of checkbox itself? — Helio, Sep 01 '22 at 09:19
Ah, sorry. Yes, I want the wrapped lines to be in line with "Some ..." — physicsboy, Sep 01 '22 at 09:21

score 2 · Accepted Answer · answered Sep 01 '22 at 09:16

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>

Perfect answer!, Just for more compatibility: `display: -webkit-box;` `display: -webkit-flex;` `display: -ms-flexbox;` `display: flex;` — Helio, Sep 01 '22 at 09:30
@Helio no, don't add them. Prefixes are no more needed for flex since too long. If you are using a browser that doesn't support flexbox then flexbox will be the last thing to worry about because you will struggle with more important properties — Temani Afif, Sep 01 '22 at 10:20

How to add padding to wrap under custom checkbox?

1 Answers1