Skip to content

Instantly share code, notes, and snippets.

@mattdanielbrown

mattdanielbrown/custom-form-elements-radio-checkbox-inputs-only-s-css.markdown

Created January 14, 2023 22:37
Show Gist options
  • Save mattdanielbrown/4dd24a308b08167ac30fe1f7d43c0032 to your computer and use it in GitHub Desktop.
Save mattdanielbrown/4dd24a308b08167ac30fe1f7d43c0032 to your computer and use it in GitHub Desktop.
Download ZIP
Custom Form Elements : Radio & Checkbox Inputs (ONLY (S)CSS)
Raw
custom-form-elements-radio-checkbox-inputs-only-s-css.markdown

Custom Form Elements : Radio & Checkbox Inputs (ONLY (S)CSS)

Custom Form Elements - Radio & Checkbox Inputs. Using ONLY (S)CSS.

A Pen by Matt Daniel Brown on CodePen.

License.

Raw
index.html
<main>
<section>
<h2>Custom Form Elements <small>Radio and Checkbox Inputs</small></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptatem, vero. Dolore et eveniet maxime hic tempora neque
explicabo eaque doloremque!</p>
<form>
<fieldset>
<legend>Custom Radio Inputs</legend>
<ul class="radio-input-list">
<li>
<input type="radio" name="radio-button" id="radio-1" checked>
<label for="radio-1">Radio Choice 1</label>
</li>
<li>
<input type="radio" name="radio-button" id="radio-2">
<label for="radio-2">Radio Choice 2</label>
</li>
<li>
<input type="radio" name="radio-button" id="radio-3">
<label for="radio-3">Radio Choice 3</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend class="form-legend">Custom Checkbox Inputs</legend>
<ul class="checkbox-input-list">
<li>
<input type="checkbox" id="checkbox-1" checked>
<label for="checkbox-1">Checkbox Option 1</label>
</li>
<li>
<input type="checkbox" id="checkbox-2">
<label for="checkbox-2">Checkbox Option 2</label>
</li>
<li>
<input type="checkbox" id="checkbox-3">
<label for="checkbox-3">Checkbox Option 3</label>
</li>
</ul>
</fieldset>
</form>
</section>
</main>
Raw
style.scss
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
$fontstack--fallback : system-ui,system-sans,-apple-system,
BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,
Cantarell,"Helvetica Neue",sans-serif;
$fontstack--inter : "Inter UI","Inter",Inter UI,Inter;
$fontstack : $fontstack--inter,$fontstack--fallback;
$txt-color : #434343 !default;
$bg-color : #ffffff !default;
$bg-color--alt: ghostwhite !default;
$_color-indigo: #617EF2;
$_color-violet: #845ef7;
$_color-red : #ff6b6b;
$_color-green : #51cf66;
$_color-orange: #ff922b;
$_color-gray8 : #343a40;
$primary-color : $_color-indigo !default;
$secondary-color: $_color-gray8 !default;
$success-color : $_color-green !default;
$warning-color : $_color-orange !default;
$danger-color : $_color-red !default;
$base-fontsize: 112.5% !default;
$transition : all 120ms ease-out !default;
$primary-color : #4727EC;
@mixin hide-visually($toggle: "hide") {
@if not index("hide" "unhide", $toggle) {
@error "`#{$toggle}` is not a valid value for the `$toggle` argument in " +
"the `hide-visually` mixin. Must be either `hide` or `unhide`.";
} @else if $toggle == "hide" {
border: 0;
// clip: rect(1px, 1px, 1px, 1px);
clip: rect(0, 0, 0, 0);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
} @else if $toggle == "unhide" {
clip: auto;
clip-path: none;
height: auto;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
}
%container {
width: 92%;
max-width: 768px;
max-width: 65ch;
margin: 0 auto;
}
.container,section,
article,hgroup {
@extend %container;
}
:root {
--txt-color : #434343;
--bg-color : #ffffff;
--bg-color--alt : ghostwhite;
--color-indigo : #617ef2;
--color-violet : #845ef7;
--color-red : #ff6b6b;
--color-green : #51cf66;
--color-orange : #ff922b;
--color-gray8 : #343a40;
--primary-color : var(--color-indigo);
--secondary-color : var(--color-gray8);
--success-color : var(--color-green );
--warning-color : var(--color-orange);
--danger-color : var(--color-red);
--base-fontsize : 112.5%;
--transition : all 120ms ease-out;
}
*, *::before, *::after { box-sizing: inherit !important; }
html {
font-size-adjust: 100%;
font-size: var(--base-fontsize);
box-sizing: border-box !important;
}
html, body {
/* text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important; */
height: 100% !important;
min-height: 100vh !important;
width: 100%;
max-width: 100vw !important;
min-width: 320px;
overflow-x: hidden;
margin: 0 !important;
padding: 0 !important;
position: relative;
background-color: $bg-color;
color: $txt-color;
font-family: $fontstack;
line-height: 1;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
main {
padding: 2em 0;
width: 100%;
flex-grow: 1;
background-color: #fff;
section {
padding: 1em 0;
margin-bottom: 2em;
}
}
p {
font-size: 1em;
font-weight: normal;
font-family: $fontstack;
line-height: 1.75;
margin: 0 auto 1em;
}
h1,h2,h3,h4,h5,h6 {
font-weight: 600;
display: block;
line-height: 1;
margin: 0 auto 1rem;
color: $txt-color;
font-family: $fontstack;
small {
font-size: smaller;
display: block;
width: 100%;
font-weight: 500;
opacity: .75;
margin: 0.75rem auto 1.75rem;
}
}
h2 {
font-size: xx-large;
}
form,legend,input,label,
fieldset,textarea {
color: $txt-color;
font-family: $fontstack;
display: block;
width: 100%;
}
legend {
font-size: x-large;
font-weight: 500;
margin: 4rem auto .25rem;
position: relative;
display: block;
width: 100%;
outline: none;
line-height: 1.5;
}
.checkbox-input-list,.radio-input-list,
.checkbox-input,.radio-input,
ul.radios,ul.checkboxes,
ul.radio-inputs,ul.checkbox-inputs {
list-style: none;
margin: .25rem auto 2rem;
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
align-content: center;
gap: 1em;
li {
list-style: none;
margin: 0;
padding: 0;
display: flex;
width: 100%;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: flex-start;
}
}
[type="checkbox"],[type="radio"] {
appearance: none !important;
user-select: none !important;
display: inline-block;
width: unset;
vertical-align: middle;
line-height: 1.5;
cursor: pointer;
transition: all 120ms ease-out;
@include hide-visually();
& ~ label {
cursor: pointer;
transition: all 120ms ease-out;
width: unset;
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: 500;
user-select: none !important;
&::before {
background-color: lighten(#DBE3E7,5%);
width: 1.25em;
height: 1.25em;
content: '';
display: inline-block;
margin: 0;
padding: 0;
vertical-align: middle;
margin-right: .75em;
content: "";
box-sizing: border-box;
display: inline-block;
position: relative;
vertical-align: middle;
// top: -0.1em;
flex-shrink: 0;
border: 2px solid gray;
border-radius: .3em;
background-repeat: no-repeat;
background-position: center;
transition: all 120ms ease-out;
}
}
&:checked {
& ~ label {
position: relative;
&::before {
background-color: $primary-color;
border-color: darken($primary-color, 10%);
}
}
}
&:active {
& ~ label::before {
transform: scale3d(.9,.9,1) !important;
transition-duration: 100ms;
}
}
&:focus {
& ~ label::before {
box-shadow: 0 0 0 3px rgba($primary-color, 0.45);
}
}
&:not(:checked) {
&:focus {
& ~ label::before {
background-color: darken(#EAEFF1, 8%);
}
}
&:not(:focus) {
&:hover {
& ~ label {
&::before {
$_bg-color : #EAEFF1;
$_bd-color : #808080;
$_hover-bg-color : darken($_bg-color,10%);
$_hover-bd-color : darken($_bd-color,10%);
background-color: $_hover-bg-color;
border-color: $_hover-bd-color;
}
}
}
}
}
}
[type="checkbox"] {
&:checked {
& ~ label {
&::before {
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%234524f5'%3E%3Cpath d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-origin: 0 0;
background-repeat: no-repeat;
background-position: center center;
background-size: 1.5em 1.5em;
background-clip: clip;
}
}
}
}
[type="radio"] {
& ~ label {
&::before {
border-radius: 50%;
}
}
&:checked {
& ~ label {
&::after {
position: absolute;
z-index: 1000;
left: .325em;
top: .32em;
background-color: #fff;
width: .6em;
height: .6em;
content:'';
border-radius: 2em;
}
}
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment