Scrolling wrapper left on checking a checkbox

index.html

<h1>Scroll a block to right and then click a label</h1>

<h3>Hide a checkbox using "left: -9999px;"</h3>
<p>I'm scrolling left on checking</p>
<div class="wrapper">
  <div class="inner">
  <input class="option1" type="checkbox" id="some-id-1" />
  <label for="some-id-1">scroll right and then click me</label>
    </div>
</div>

<h3>Hide a checkbox using "visibility: hidden;"</h3>
<p>I'm NOT scrolling left on checking</p>
<div class="wrapper">
  <div class="inner">
  <input class="option2" type="checkbox" id="some-id-2" />
  <label for="some-id-2">scroll right and then click me</label>
    </div>
</div>

Scrolling wrapper left on checking a checkbox.markdown

Scrolling wrapper left on checking a checkbox

http://codersblock.com/blog/checkbox-trickery-with-css/#comment-2107072157

A Pen by malyw on CodePen.

License.

style.css

// CHECKBOXES OPTIONS
.option1{
  position: absolute;
  left: -9999px;
}

.option2{
  position: absolute;
  visibility: hidden;
}

// COMMON
.wrapper{
  width: 300px;
  overflow-x: auto;
}

.inner{
  width: 500px;
  text-align: center;
}

[type=checkbox] + label{
  background-color: green;
}

[type=checkbox]:checked + label{
  background-color: yellow;
}