Skip to content

Instantly share code, notes, and snippets.

@teewuane
Created May 10, 2019 20:24
Show Gist options
  • Save teewuane/5f3e51cf82978c718517fa55259e7e3b to your computer and use it in GitHub Desktop.
Save teewuane/5f3e51cf82978c718517fa55259e7e3b to your computer and use it in GitHub Desktop.
Styled radio inputs to look like big checkboxes.. all css. Well, SCSS that is..
<div class="radio">
<input type="radio" name="awardchoice" value="THEVALUE" required />
<span class="checkmark"></span>
</div>
.radio {
margin-left: -64px;
input {
opacity: 0;
}
.checkmark {
position: relative;
&::before {
position: absolute;
top: 3px;
content: "";
display: inline-block;
height: 32px;
width: 32px;
border: 3px solid #fff;
background-color: #fff;
}
&::after {
position: absolute;
left: 8px;
top: 12px;
content: "";
display: inline-block;
height: 10px;
width: 18px;
border-left: 5px solid #000;
border-bottom: 5px solid #000;
transform: rotate(-45deg);
}
}
}
.radio input + .checkmark::after {
content: none;
}
.radio input:checked + .checkmark::after {
content: "";
}
.radio input:focus + .checkmark::before {
outline: rgb(59, 153, 252) auto 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment