CSS: checkbox not checked when spacebar is pressed

Question

I have the simple form below (and here: https://codepen.io/anon/pen/QxKrex). The checkbox works when you click on it, but I would like that when you have the focus on it (after a "tab" from the textfield) and press spacebar, it would be marked as well. However, it doesn't seem to work. Any ideas?

index.html

.labelCheckbox {
        display: contents;
    }
    
    .checkbox label {
        float: left;
        padding-left: 0px !important;
        font-size: initial;
    }
    
    input[type=checkbox] {
        opacity: 0;
    }
    
    input[type="checkbox"]{
        display: none;
    }
    
    input[type="checkbox"] + label::before{
        background-color: white;
        border: 1px solid #135BCF;
        content: '';
        display: inline-block;
        height: 22px;
        width: 22px;
        text-align: center;
        margin: 0 5px -2px 0;
        overflow: hidden;
        top: 3px;
        position: relative;
        float: initial;
    }
    
    input[type="checkbox"]:checked + label::before{
        content: '\2713';
    }

<form action="/send.php" method="post" name="myForm">
      <label for="fname"></label>
      <input type="text" id="fname" name="fname" placeholder="Name" required>
        <input type="checkbox" id="checkbox1">
        <label for="checkbox1" tabindex="0;"></label>
      <label class="labelCheckbox">&nbsp&nbspI agree</label>
      <button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
    </form>

http://wiki.accede-web.com/en/notices/interfaces-riches-javascript/checkbox-simulees — jspcal, Jun 07 '18 at 10:47

Sebastian Brosch · Accepted Answer · 2018-06-07T21:44:35.487

You can't use display:none; or visibility:hidden; on the <input type="checkbox"/> to check or uncheck with SPACE key. But you are using opacity:0; to hide the checkbox element, that's fine to hide the element:

input[type="checkbox"] {
  opacity:0;
}
input[type="checkbox"] + label {
  outline:0;
  user-select:none;
}
input[type="checkbox"] + label::before {
  background:#fff;
  border:1px solid #999;
  content:'';
  display:inline-block;
  height:22px;
  overflow:hidden;
  position:relative;
  text-align:center;
  top:7px;
  width:22px; 
}
input[type="checkbox"]:checked + label::before {
  content:'\2713';
}
input[type="checkbox"]:focus + label::before {
  border-color:#135BCF;
}

<form action="/send.php" method="post" name="myForm">
  <label for="fname"></label>
  <input type="text" id="fname" name="fname" placeholder="Name" required>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" tabindex="-1"></label>
  <label class="labelCheckbox">I agree</label>
  <button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
</form>

To ignore the "real" checkbox on tabindex you need to set the tabindex attribute to -1.

You can improve the custom checkbox element like the following:

input[type="checkbox"] {
  opacity:0;
}
input[type="checkbox"] + label {
  margin-left:10px;
  outline:0;
  padding-left:5px;
  position:relative;
  user-select:none;
}
input[type="checkbox"] + label::before {
  background:#fff;
  border:1px solid #999;
  content:'';
  height:22px;
  left:0;
  position:absolute;
  text-align:center;
  transform:translate(-100%,-50%);
  top:50%;
  width:22px;
}
input[type="checkbox"]:checked + label::before {
  content:'\2713';
}
input[type="checkbox"]:focus + label::before {
  border-color:#135BCF;
}

<input type="text" value=""/>
<input type="checkbox" id="checkbox1">
<label for="checkbox1" tabindex="-1">I agree</label>
<button>OK</button>

With this checkbox element you can also click on the label text to check the checkbox. You can also focus the control with the TAB and check and uncheck the checkbox with SPACE.

Please note that when you do that the focus is not visible in the checkbox and you need to do an extra tab to go to the button. — , Jun 07 '18 at 10:47
Looks good! It is not possible to have that "visible focus" on the checkbox anymore? The blue square when you have the focus on the checkbox? — , Jun 07 '18 at 10:58

Takit Isy · Answer 2 · 2018-06-08T06:58:06.967

As you can't tick/untick the checkbox if it's not displayed,

I suggest you to use the ::after pseudo-element to cover the regular checkbox.

See working snippet, with some comments:

.labelCheckbox {
  display: contents;
}

.checkbox label {
  float: left;
  padding-left: 0px !important;
  font-size: initial;
}

/* TAKIT: Added this */
input[type="checkbox"] {
  position: relative;
}

/* TAKIT: Changed a little the style below */
input[type="checkbox"]::before {
  display: inline-block;
  position: absolute; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -0.33em;
  border: 1px solid #135BCF;
  background-color: white;
  text-align: center;
  content: '';
}

input[type="checkbox"]:checked::before {
  content: '\2713';
}

<form action="/send.php" method="post" name="myForm">
  <label for="fname"></label>
  <input type="text" id="fname" name="fname" placeholder="Name" required>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1" tabindex="0;"></label>
  <label class="labelCheckbox">  I agree</label>
  <button class="modalButton" type="submit" value="submit" id="submit2">Submit</button>
</form>

Hope it helps.

CSS: checkbox not checked when spacebar is pressed

2 Answers2