Simple accessible styling of radio buttons.
how I made this: https://www.nickhart.co.uk/2020/09/29/making-accessible-custom-radio-inputs/
A Pen by IpsumLorem16 on CodePen.
<div class="radio-wrapper"> | |
<fieldset> | |
<legend>Select a maintenance drone:</legend> | |
<div class="custom-radio"> | |
<input class="visually-hidden" type="radio" id="huey" name="drone" value="huey"> | |
<label for="huey"> | |
<span class="input-circle"></span> | |
Huey | |
</label> | |
</div> | |
<div class="custom-radio"> | |
<input class="visually-hidden" type="radio" id="dewey" name="drone" value="dewey"> | |
<label for="dewey"> | |
<span class="input-circle"></span> | |
Dewey | |
</label> | |
</div> | |
<div class="custom-radio"> | |
<input class="visually-hidden" type="radio" id="louie" name="drone" value="louie"> | |
<label for="louie"> | |
<span class="input-circle"></span> | |
Louie | |
</label> | |
</div> | |
</fieldset> |
* { | |
box-sizing: border-box; | |
-webkit-tap-highlight-color: transparent; | |
} | |
html { | |
height: 100%; | |
} | |
body { | |
display: flex; | |
height: 100%; | |
justify-content: center; | |
align-content: center; | |
align-items: center; | |
font-family: Helvetica, Arial; | |
color: #464e54; | |
background: #7967fc; | |
} | |
.radio-wrapper { | |
padding: 10px; | |
background: #f2f2f2; | |
border-radius: 5px; | |
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); | |
} | |
fieldset { | |
margin: 5px; | |
} | |
fieldset legend { | |
margin: 5px; | |
font-size: 21px; | |
} | |
.custom-radio { | |
margin: 10px 5px; | |
overflow: visible; | |
} | |
.custom-radio label { | |
display: inline-flex; | |
align-items: center; | |
cursor: pointer; | |
} | |
.custom-radio .input-circle { | |
display: inline-block; | |
margin-right: 8px; | |
width: 21px; | |
height: 21px; | |
border: 2px solid lightgrey; | |
background: white; | |
border-radius: 50%; | |
transition: border 150ms; | |
} | |
.custom-radio input:checked + label .input-circle { | |
border: 6px solid #275efe; | |
} | |
.custom-radio input:focus + label .input-circle { | |
box-shadow: 0px 0px 0px 2px #91b1f3; | |
} | |
.visually-hidden { | |
clip: rect(0 0 0 0); | |
clip-path: inset(50%); | |
height: 1px; | |
overflow: hidden; | |
position: absolute; | |
white-space: nowrap; | |
width: 1px; | |
} |