CSS Checkboxes, how to deal with required

Question

I am swapping browser checkboxes for my own using this HTML

input[type="checkbox"] {
  display: none;
  width: 30px;
  &+label {
    width: 30px;
    &::before {
      display: inline-block;
      width: 30px;
      height: 26px;
      margin: 0px;
      vertical-align: middle;
      background: url(../images/tick.png) -30px top no-repeat;
      cursor: pointer;
      content: "";
    }
  }
  &:checked+label::before {
    background: url(../images/tick.png) left top no-repeat;
  }
}

<input required type="checkbox" id="acceptance" name="acceptance" value="yes"><label for="acceptance"></label>

Don't understand what you mean, the form won't be submitted unless it is checked — Asons, Jun 22 '17 at 08:50
Do you mean how to visually show that the checkbox is required? like putting a red asterisk or something like that? — mikepa88, Jun 22 '17 at 08:57
I need to provide visual feedback. The form won't submit but unlike a vanilla checkbox there's no HTML5 feedback to the label element. — Chris Pink, Jun 22 '17 at 08:58
@mikepa88 that is the fallback position but I would rather have some direct indication that it is this checkbox causing submission to be disabled — Chris Pink, Jun 22 '17 at 08:59
you could add an :after with some text indicating that it must be checked. — mikepa88, Jun 22 '17 at 09:02
You've not added the `javascript` tag, so I've only posted CSS solutions. Do you want a javascript solution for non-html5 compliant browsers? — Richard Parnaby-King, Jun 22 '17 at 10:24

score 1 · Answer 1 · answered Jun 22 '17 at 10:24

You do not need the label. You can add the :before element to the checkbox input directly (be sure to do cross-browser checking. Not sure of compatibility).

Any html5 compliant browser will then give the pop-up saying that the element is required:

As I don't have the images, I changed the un-checked colour to red, and the checked colour to blue:

input[type="checkbox"] {
  width: 30px;
}

input[type="checkbox"]::before {
  display: inline-block;
  width: 30px;
  height: 26px;
  margin: 0px;
  vertical-align: middle;
  background: url(../images/tick.png) -30px top no-repeat red;
  cursor: pointer;
  content: "";
}

input[type="checkbox"]:checked::before {
  background: url(../images/tick.png) left top no-repeat blue;
}

<form>
<input required type="checkbox" id="acceptance" name="acceptance" value="yes">
<input type="submit" />
</form>

score 0 · Answer 2 · answered Jun 22 '17 at 08:59

0

You are using :before to show a tick/cross image to the label depending on the checkbox :checked setting. Do the same for :after:

input[type="checkbox"] {
    &[required] + label:after {
        content: "*";
        color: red;
    }
}

answered Jun 22 '17 at 08:59

Richard Parnaby-King

14,703
11
69
129

score 0 · Answer 3 · answered Jul 31 '19 at 10:08

since i'm having this kind of issue too, and found newer solution, i'll share it here

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Using_built-in_form_validation

now we have :valid and :invalid pseudo class

eg:

input[type=checkbox]:invalid + label {
   color: red;
}

hope it helps

CSS Checkboxes, how to deal with required

3 Answers3