osx-like color picker

by hfrntt

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<fieldset class="colors">
    <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

.colors:not(:checked) .red { background-color: red; }
.colors:not(:checked) .blue { background-color: blue; }
.colors:not(:checked) .green { background-color: green; }
.colors:not(:checked) .magenta { background-color: magenta; }
.colors:not(:checked) .cyan { background-color: cyan; }
.colors:not(:checked) .yellow { background-color: yellow; }

.colors:not(:checked) > input {
    left: -999em;
    position: absolute;
    top: -999em;
}

.colors:not(:checked) > label {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAeFBMVEXExMTPz8/e3t7Y2Njr6+vw8PDZ2dnl5eXl5eXQ0NDX19fY2NjY2Njr6+vw8PDDw8PV1dXd3d3e3t7l5eXr6+vv7+/Nz9Dx8/TLzc719/jw8fPY2tvv8fKVlpfq6+7X2dqtr7D3+fr3+Pry8/XMzc/q6+2PkJH4+fuxPbgSAAAAFnRSTlNNU15bcX5ZZ2ZUWllYcn9LWF1daHN9cLkbLQAAAIBJREFUeF59z9cOgzAMQFFoTRJmt+0MVuf//2EzEA8V6nm8siw7m39sBk3GeYZ0CvrVdYV3KwYdw8NeAaBtASx9QjColJQXKRWaOOH4vItO7JYgmkbUtRBr2AdVdVxDHpRlzmmHwSw5YApkp/7t9ZOl5bAR+cmM46C3T5/vf7/9AtGdGKrul5oPAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    float: left;
    height: 1px;
    margin: 1px 2px 1px 1px;
    overflow: hidden;
    padding: 15px 0 0 15px;
    width: 1px;
}

.colors > input:checked + label {
    border: 1px solid #666;
    margin: 0 1px 0 0;
}

.colors:not(:checked) > input + label:hover {
    border: 1px solid #ccc;
    margin: 0 1px 0 0;
}