<div class="content">
<fieldset>
<legend>Please choose your favourite snack:</legend>
<div class="radio-wrapper">
<input id="cookie" type="radio" name="snack" value="cookie"/>
<label for="cookie">Cookies 🍪</label><br>
</div>
<div class="radio-wrapper">
<input id="apple" type="radio" name="snack" value="apple">
<label for="apple">Apple 🍏</label><br>
</div>
<div class="radio-wrapper">
<input id="pretzels" type="radio" name="snack" value="pretzels">
<label for="pretzels">Pretzels 🥨</label>
</div>
</fieldset>
</div>
$lightGrey: #F2F2F2;
$grey: #6E6E6E;
$white: #FFFFFF;
$blue: #1849AB;
body {
background-color: $lightGrey;
display: flex;
font-family: 'Arial';
justify-content: center;
padding: 4rem;
}
.content {
background-color: $white;
padding: 2rem;
}
fieldset {
border: none;
}
.radio-wrapper {
margin: 1rem 0;
}
input[type="radio"] {
opacity: 0;
+ label {
cursor: pointer;
position: relative;
&::before {
border: 1px solid $grey;
border-radius: 50%;
content: '';
height: 18px;
left: -24px;
position: absolute;
top: 0;
width: 18px;
}
&::after {
border-radius: 50%;
content: '';
height: 12px;
left: -20px;
position: absolute;
top: 4px;
width: 12px;
}
}
&:focus {
+ label::before {
box-shadow: 0 0 0 2px rgba(21, 156, 228, 0.7);
}
}
&:checked {
+ label::after {
background: $blue;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.