Return to Answer

body { background: #DDD; } 
.button:before { content: 'S'; }
.box:before { content: '☐'; }
label.button   { background: #BBB;
    border-top: solid 2px white;border-left: solid 2px white;
    border-right: solid 2px black;border-bottom: solid black 2px; }

#demo2:checked ~ .but2:before { content: 'Des'; }
#demo2:checked ~ .but2  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }
#demo2:checked ~ .box2:before { content: '☒'; }

#demo1:checked ~ .but1  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }

#demo1:checked ~ .but1:before { content: 'Des'; }
#demo1:checked ~ .box1:before { content: '☒'; }

<input id="demo1" type="checkbox">Demo 1</input>
<input id="demo2" type="checkbox">Demo 2</input>
<br />
<label for="demo1" class="button but1">elect 1</label> - 
<label for="demo2" class="button but2">elect 2</label>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis ...
<br />
<label for="demo1" class="but1 button">elect this 2nd label for box 1</label> - 
<label class="but2 button" for="demo2">elect this other 2nd label for box 2</label>
<br />
<label for="demo1" class="box box1"> check 1</label>
<label for="demo2" class="box2 box"> check 2</label>

body { background: #DDD; } 
.button:before { content: 'S'; }
.box:before { content: '☐'; }
label.button   { background: #BBB;
    border-top: solid 2px white;border-left: solid 2px white;
    border-right: solid 2px black;border-bottom: solid black 2px; }

#demo2:checked ~ .but2:before { content: 'Des'; }
#demo2:checked ~ .but2  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }
#demo2:checked ~ .box2:before { content: '☒'; }

#demo1:checked ~ .but1  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }

#demo1:checked ~ .but1:before { content: 'Des'; }
#demo1:checked ~ .box1:before { content: '☒'; }

<input id="demo1" type="checkbox">Demo 1</input>
<input id="demo2" type="checkbox">Demo 2</input>
<br />
<label for="demo1" class="button but1">elect 1</label> - 
<label for="demo2" class="button but2">elect 2</label>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis ...
<br />
<label for="demo1" class="but1 button">elect this 2nd label for box 1</label> - 
<label class="but2 button" for="demo2">elect this other 2nd label for box 2</label>
<br /><br />
<label for="demo1" class="box box1"> check 1</label>
<label for="demo2" class="box2 box"> check 2</label>