Custom Checkboxes & Radio Buttons

custom-checkboxes-radio-buttons.markdown

Custom Checkboxes & Radio Buttons

Here's some fancy (CSS only) checkboxes and radio buttons that have a consistent look and feel across all modern web browsers.

A Pen by Mark Hillard on CodePen.

License.

index.html

<section>
    <h1>Checkboxes</h1>
    <div class="checkbox">
        <input type="checkbox" id="subaru" name="car" value="Subaru" />
        <label for="subaru"></label>
        <span for="subaru">Subaru</span>
    </div>
    <div class="checkbox">
        <input type="checkbox" id="fiat" name="car" value="Fiat" />
        <label for="fiat"></label>
        <span for="fiat">Fiat</span>
    </div>
</section>

<section>
    <h1>Radio Buttons</h1>
    <div class="radio">
        <input type="radio" id="male" name="sex" value="Male" />
        <label for="male"></label>
        <span>Male</span>
    </div>
    <div class="radio">
        <input type="radio" id="female" name="sex" value="Female" />
        <label for="female"></label>
        <span>Female</span>
    </div>
</section>

style.css

/* Global Styles */

@import url("//fonts.googleapis.com/css?family=Oxygen:300");

*,*::before,*::after { box-sizing:border-box; }
*,*:focus { outline:none; }

html,body { font-family:"Oxygen", sans-serif; height:100%; }

section { float:left; height:100%; padding:20px 30px; width:50%; }
section:first-of-type { background-color:#666; color:#222; }
section:last-of-type { background-color:#333; color:#777; }
section span { color:#fff; margin-left:7px; }

h1 { font-size:2rem; margin:0 0 30px -4px; }

@media only screen and (max-width:620px) {
section { height:50%; width:100%; }
}


/* Checkbox Styles */

.checkbox { margin-bottom:15px; position:relative; width:auto; }

.checkbox label {
background:#eee;
border:1px solid #ddd;
border-radius:2px;
cursor:pointer;
height:20px;
left:0;
position:absolute;
top:0;
width:20px;
}

.checkbox label:after {
background:transparent;
border:2px solid #333;
border-right:none;
border-top:none;
content:"";
height:6px;
left:3px;
opacity:.25;
position:absolute;
top:5px;
transform:rotate(-45deg);
transition:opacity 100ms ease-in;
width:12px;
}

.checkbox label:hover::after { opacity:.5; }
.checkbox input[type="checkbox"]:checked + label:after { opacity:1; }


/* Radio Button Styles */

.radio { margin-bottom:15px; position:relative; width:auto; }

.radio label {
background:#eee;
border:1px solid #ddd;
border-radius:100%;
cursor:pointer;
height:20px;
left:0;
position:absolute;
top:0;
width:20px;
}

.radio label:after {
background:#333;
border-radius:100%;
content:"";
height:14px;
left:2px;
opacity:.25;
position:absolute;
top:2px;
transition:opacity 100ms ease-in;
width:14px;
}

.radio label:hover::after { opacity:.5; }
.radio input[type="radio"]:checked + label:after { opacity:1; }