Label to control checkbox

Question

I've been playing around with the CSS hack to use <label for="".. to control the toggle for a checkbox. Here's a codepen.

When I add another <input>, it disallows the toggle for the checkbox. (When I remove the hidden input everything works fine)..

Are my css selectors accommodating for this hidden input? I may be missing something simple.

.checkbox-on-off {
  position: relative;
  display: inline-block;
  width: 35px;
  padding-right: 2px;
  overflow: hidden;
  vertical-align: middle;
    margin-top: 10px;
}

/* this positions the check box label over the text box */
.checkbox-on-off input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

/* makes the background blue */
.checkbox-on-off input[type=checkbox]:checked+label {
  background-color: #167ac6;
}
/* this is the grey background check mark */
.checkbox-on-off label {
  display: inline-block;
  border: 1px solid transparent;
  height: 15px;
  width: 100%;
  background: #b8b8b8;
  cursor: pointer;
  border-radius: 20px;
}

/* this adds / positions the check mark */
.checkbox-on-off input[type=checkbox]:checked+label .checked {
  display: inline-block;
  margin-top: 3px;
  margin-left: 6px;
  background-size: auto;
  width: 10px;
  height: 10px;
}

/* if you click the checkbox, it sometimes has a grey square */
.checkbox-on-off label .checked {
  display: none;
}

.checkbox-on-off input[type=checkbox]:checked+label .unchecked {
  display: none;
}

.checkbox-on-off label .unchecked {
  display: inline-block;
  float: right;
  padding-right: 3px;
}


#autoplay-checkbox-label
.checkbox-on-off label {
  display: inline-block;
  border: 1px solid transparent;
  height: 13px;
  width: 100%;
  background: #b8b8b8;
  cursor: pointer;
  border-radius: 20px;
}

/* this positions the white dot */
.checkbox-on-off input[type=checkbox]:checked+label .toggle {
  float: right;
}

/* this is the actual white dot */
.checkbox-on-off label .toggle {
  float: left;
  background: #fbfbfb;
  height: 15px;
  width: 13px;
  border-radius: 20px;
}

<span class="checkbox-on-off ">
    <input id="autoplay-checkbox" class="" type="checkbox" checked="">
    <input name="" type="hidden" value="false">
    <label for="autoplay-checkbox" id="autoplay-checkbox-label">
        <span class="checked">&nbsp;</span>
        <span class="unchecked"></span>
        <span class="toggle">&nbsp;</span>
    </label>
</span>

EdenSource · Accepted Answer · 2015-04-02 15:30:03Z

1

The problem comes from this selector : input[type=checkbox]:checked+label

It means you are targetting label which is immediately after your input (element+element). Problem is your hidden input is between checkbox and label.

Everything works if you place your hidden input :

before your checkbox,
after your label,
inside your label.

Live Demo with 3 hidden inputs

Update 1 :

In case you cannot modify HTML markup, you can move elements by jquery by adding $("input[type=hidden]").prependTo("#autoplay-checkbox");

This will move the hidden input before your checkbox

Updated exemple

edited Apr 2, 2015 at 15:30

answered Apr 2, 2015 at 14:27

EdenSource

3,38719 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark C. Over a year ago

Awesome. Thanks! I was overlooking it. Unfortunately Razor (MVC) adds a hidden checkbox.. I'll have to find a workaround. Thanks a ton!

EdenSource Over a year ago

See update 1 in the answer for a quick workaround ;)

Mark C. Over a year ago

I thought about that method. I may end up using that. Thanks again! I wish I could upvote again!

Collectives™ on Stack Overflow

Label to control checkbox

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related