CODEWITHSUNDEEP
htmlcsswordpresscontact-form-7
Pawel Mucha
Pawel Mucha

Reputation: 27

Pure CSS checkboxes doesn't work in WordPress

I found pure CSS checkboxes that I wanted to use (http://codepen.io/imohkay/pen/zFwec) on WordPress site that uses Contact Form 7 plugin. After clicking on these checkboxes nothing happens.

I copied whole CSS and changed classes only to fit it to HTML generated by Contact Form 7 via WordPress.

HTML:

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}
<input type="checkbox" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>
<span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox001[]" value="Poprawić zaangażowanie pracowników">&nbsp;<span for="checkbox001[]" class="wpcf7-list-item-label">Option b</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Otrzymywać niefiltrowany feedback z terenu">&nbsp;<span class="wpcf7-list-item-label">Option c</span></span>

I can't find what is wrong here

Upvotes: 1

Views: 1307

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

The problem becomes clear if you remove opacity: 0; from input[type="checkbox"]:

input[type="checkbox"] {
  position: absolute;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}
<input type="checkbox" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>
<span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox001[]" value="Poprawić zaangażowanie pracowników">&nbsp;<span for="checkbox001[]" class="wpcf7-list-item-label">Option b</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Otrzymywać niefiltrowany feedback z terenu">&nbsp;<span class="wpcf7-list-item-label">Option c</span></span>

The checkbox comes before the pseudo element in HTML so is positioned behind it. To fix, make the following changes:

  • Add z-index: 1; to input[type="checkbox"] to place the checkbox above the pseudo element and therefore clickable
  • Set a width and height on input[type="checkbox"] to make it match the dimensions of the pseudo element

input[type="checkbox"] {
  height: 28px;
  opacity: 0;
  position: absolute;
  width: 28px;
  z-index: 1;
}
input[type="checkbox"],
.wpcf7-list-item-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.wpcf7-list-item-label {
  position: relative;
}
input[type="checkbox"] + .wpcf7-list-item-label:before {
  content: '';
  background: #fff;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  background: #008aff;
}
<input type="checkbox" name="checkbox001[]" value="Połączyć wewnętrzne silosy">
<label for="checkbox001[]" class="wpcf7-list-item-label">Option a</label>
<span class="wpcf7-list-item">
      <input type="checkbox" name="checkbox001[]" value="Poprawić zaangażowanie pracowników">&nbsp;<span for="checkbox001[]" class="wpcf7-list-item-label">Option b</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox001[]" value="Otrzymywać niefiltrowany feedback z terenu">&nbsp;<span class="wpcf7-list-item-label">Option c</span></span>

Upvotes: 1

Related Questions