css - チェックボックスをオンにして色を変更する

Question

それぞれに2つの要素と8つの色があります。必要なのは、チェックボックスをクリックしたときに各要素の色を変更することだけです。また、要素の別のボックスをチェックするときは、最初のチェックをオフにする必要があります。可能であればcssしてくださいここに完全なコードがあります：http://codepen.io/gazdovsky/pen/FfGKH htmlの一部

    `
<div class="demo2">
    <div class="tag">Clocks color</div>
    <input type="checkbox" id="checkbox-1" class="regular-checkbox big-checkbox color1" /><label for="checkbox-1" style="
        background-color: #eeeeee;" ></label>
    <input type="checkbox" id="checkbox-2" class="regular-checkbox big-checkbox 2color" /><label for="checkbox-2" style="
        background-color: #4b69af;"></label>  
    <input type="checkbox" id="checkbox-3" class="regular-checkbox big-checkbox 3color" /><label for="checkbox-3" style="
        background-color: #403486;"></label>
    <input type="checkbox" id="checkbox-4" class="regular-checkbox big-checkbox 4color" /><label for="checkbox-4" style="
        background-color: #3ea03b;"></label>
    <input type="checkbox" id="checkbox-5" class="regular-checkbox big-checkbox 5color" /><label for="checkbox-5" style="
        background-color: #f0df0d;"></label>
    <input type="checkbox" id="checkbox-6" class="regular-checkbox big-checkbox 6color" /><label for="checkbox-6" style="
        background-color: #f5a02c;"></label>
    <input type="checkbox" id="checkbox-7" class="regular-checkbox big-checkbox 7color" /><label for="checkbox-7" style="
        background-color: #d23f2d;"></label>
    <input type="checkbox" id="checkbox-8" class="regular-checkbox big-checkbox 8color" /><label for="checkbox-8" style="
        background-color: #201b21;"></label>
    <div>Arrows color</div>
    <input type="checkbox" id="checkbox-1-2" class="regular-checkbox big-checkbox 1color" /><label for="checkbox-1-2" style="
        background-color: #eeeeee;"></label>
</div>
<div>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="800px" height="800px"  viewBox="100 100 1000 1000" enable-background="new 0 0 0 0" class="hand" >
    <g transform="translate(280,150) rotate(0) scale (0.2)"  funciri="none">
    <path fill-rule="evenodd" class="hand" fill="#0D0D0D" d="M480.366,674.977c-1.345-36.176,16.102-91.082,42.928-100.447"/>
    <g transform="translate(70,-50)">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#30AF4A" class="arrow" d="M315.277,518.127h-33.089h-22.022
        c-3.031,0-5.949,1.199-8.093,3.369c-2.145,2.143-3.346,5.055-3.346,8.08v1.855c0,3.027,1.201,5.939,3.346,8.0827z"/>
    <filter id="pictureFilter" >
        <feGaussianBlur stdDeviation="15" />
    </filter>
</svg>
    `
here is CSS:


 `.demo2 label {
    display: inline-block;
    }
    .demo2 .regular-checkbox {
    display: none;
    }
    .demo2 .regular-checkbox + label {
    background-color: #cc6e5d;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    }
    .demo2 .regular-checkbox + label:active, .regular-checkbox:checked + label:active{
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }
    .demo2 .regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 10px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #fff;
    }
    .demo2 .big-checkbox + label {
    padding: 18px;
    }
    .demo2 .big-checkbox:checked + label:after {
    font-size: 28px;
    left: 6px;
    }
    .logo {
    width: 300px;
    height: 300px;
    }
    .ground .checkbox-1:checked + label:after {
    fill: #d23f2d;
    }
    .ground{
    fill: #d23f2d;
    }
    .arrow,
    .hand{
    -webkit-transition:all 0.8s ease;
    } 
    .arrow:hover,
    .hand:hover {
    fill: #ace63c; 
    }`