osx-like color picker

by hfrntt

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<fieldset>
    <legend>Pick a color:</legend>
    <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>
    
    <input type="radio" name="label-color" id="label-color-6" value="yellow" />
    <label for="label-color-6" class="yellow">Yellow</label>
</fieldset>

CSS

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

input[type="radio"] {
    left: -999em;
    position: absolute;
    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 {
    border-radius: 5px;
    cursor: pointer;
    display: block;
    float: left;
    height: 1px;
    margin: 2px 3px 2px 2px;
    overflow: hidden;
    padding: 16px 0 0 16px;
    width: 1px;
}