title: Change color by checking checkbox
body: <p>I have 2 element and 8 colors for each. All what I need is change color of each element when I clicked on checkbox. And when we check another box for element, first check must be unchecked.
  Please css if it possible
  Here is full code: <a href="http://codepen.io/gazdovsky/pen/FfGKH" rel="nofollow">http://codepen.io/gazdovsky/pen/FfGKH</a>
  part of html </p>
  
  <pre><code>    `
  &lt;div class="demo2"&gt;
      &lt;div class="tag"&gt;Clocks color&lt;/div&gt;
      &lt;input type="checkbox" id="checkbox-1" class="regular-checkbox big-checkbox color1" /&gt;&lt;label for="checkbox-1" style="
          background-color: #eeeeee;" &gt;&lt;/label&gt;
      &lt;input type="checkbox" id="checkbox-2" class="regular-checkbox big-checkbox 2color" /&gt;&lt;label for="checkbox-2" style="
          background-color: #4b69af;"&gt;&lt;/label&gt;  
      &lt;input type="checkbox" id="checkbox-3" class="regular-checkbox big-checkbox 3color" /&gt;&lt;label for="checkbox-3" style="
          background-color: #403486;"&gt;&lt;/label&gt;
      &lt;input type="checkbox" id="checkbox-4" class="regular-checkbox big-checkbox 4color" /&gt;&lt;label for="checkbox-4" style="
          background-color: #3ea03b;"&gt;&lt;/label&gt;
      &lt;input type="checkbox" id="checkbox-5" class="regular-checkbox big-checkbox 5color" /&gt;&lt;label for="checkbox-5" style="
          background-color: #f0df0d;"&gt;&lt;/label&gt;
      &lt;input type="checkbox" id="checkbox-6" class="regular-checkbox big-checkbox 6color" /&gt;&lt;label for="checkbox-6" style="
          background-color: #f5a02c;"&gt;&lt;/label&gt;
      &lt;input type="checkbox" id="checkbox-7" class="regular-checkbox big-checkbox 7color" /&gt;&lt;label for="checkbox-7" style="
          background-color: #d23f2d;"&gt;&lt;/label&gt;
      &lt;input type="checkbox" id="checkbox-8" class="regular-checkbox big-checkbox 8color" /&gt;&lt;label for="checkbox-8" style="
          background-color: #201b21;"&gt;&lt;/label&gt;
      &lt;div&gt;Arrows color&lt;/div&gt;
      &lt;input type="checkbox" id="checkbox-1-2" class="regular-checkbox big-checkbox 1color" /&gt;&lt;label for="checkbox-1-2" style="
          background-color: #eeeeee;"&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;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" &gt;
      &lt;g transform="translate(280,150) rotate(0) scale (0.2)"  funciri="none"&gt;
      &lt;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"/&gt;
      &lt;g transform="translate(70,-50)"&gt;
      &lt;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"/&gt;
      &lt;filter id="pictureFilter" &gt;
          &lt;feGaussianBlur stdDeviation="15" /&gt;
      &lt;/filter&gt;
  &lt;/svg&gt;
      `
  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; 
      }`
  </code></pre>