<h1>Radio Color Picker</h1>
<input type="radio" name="color" id="red" value="red" />
<label for="red"><span class="red"></span></label>
<input type="radio" name="color" id="green" />
<label for="green"><span class="green"></span></label>
<input type="radio" name="color" id="yellow" />
<label for="yellow"><span class="yellow"></span></label>
<input type="radio" name="color" id="olive" />
<label for="olive"><span class="olive"></span></label>
<input type="radio" name="color" id="orange" />
<label for="orange"><span class="orange"></span></label>
<input type="radio" name="color" id="teal" />
<label for="teal"><span class="teal"></span></label>
<input type="radio" name="color" id="blue" />
<label for="blue"><span class="blue"></span></label>
<input type="radio" name="color" id="violet" />
<label for="violet"><span class="violet"></span></label>
<input type="radio" name="color" id="purple" />
<label for="purple"><span class="purple"></span></label>
<input type="radio" name="color" id="pink" />
<label for="pink"><span class="pink"></span></label>
@import url(https://fonts.googleapis.com/css?family=Lato:400,300);
$colors: (
red: #DB2828,
orange: #F2711C,
yellow: #FBBD08,
olive: #B5CC18,
green: #21BA45,
teal: #00B5AD,
blue: #2185D0,
violet: #6435C9,
purple: #A333C8,
pink: #E03997
);
* {
box-sizing: border-box;
}
body {
position: absolute;
top: 35%;
left: 35%;
transform: translate(-35%, -35%);
font-family: 'lato';
color: #333;
}
input[type="radio"] {
display: none;
&:checked + label {
span { transform: scale(1.25); }
@each $name, $value in $colors {
.#{$name} {
border: 2px solid darken($value, 25%);
}
} // !@each
} // !&:checked + label
}
label {
display: inline-block;
width: 25px;
height: 25px;
margin-right: 10px;
cursor: pointer;
&:hover {
span {
transform: scale(1.25);
}
}
span {
display: block;
width: 100%;
height: 100%;
transition: transform .2s ease-in-out;
@each $name, $value in $colors {
&.#{$name} {
background: $value;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.