ElementStacks

by hfrntt

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<input type="radio" name="label-color" id="label-color-1" value="red" />
<label for="label-color-1" class="red">Red</label>

<input type="radio" name="label-color" id="label-color-2" value="green" />
<label for="label-color-2" class="green">Green</label>

<input type="radio" name="label-color" id="label-color-3" value="blue" />
<label for="label-color-3" class="blue">Blue</label>

<input type="radio" name="label-color" id="label-color-4" value="cyan" />
<label for="label-color-4" class="cyan">Cyan</label>

<input type="radio" name="label-color" id="label-color-5" value="magenta" />
<label for="label-color-5" class="magenta">Magenta</label>

CSS

.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.magenta { background-color: magenta; }
.cyan { background-color: cyan; }

input[type="radio"] {
    position: absolute;
    left: -999em;
    top: -999em;
}

input[type="radio"]:checked + label {
    border: 2px solid #666;
    margin: 0 1px 0 0;
}

label:hover {
    border: 2px solid #ccc;
    margin: 0 1px 0 0;
}

label {
    display: block;
    float: left;
    width: 1px;
    height: 1px;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: -1px 0;
    margin: 2px 3px 2px 2px;
    overflow: hidden;
    padding: 16px 0 0 16px !important;
    cursor: pointer;
}