Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Improving Our Todo App Using Filters to Order ng-repeat Items

Posted by George Akinian
George Akinian
17,615 Points

Someone please elaborate the purpose of span element styled and why checkbox is not custom stilled instead?

I'm sure there's a pretty good reason why Huston is doing it this way it's just that I am not sure why exactly.

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Checkboxes (and radio buttons) don't allow custom styling. I've always used a pseudo-element to show a custom checkbox. Here's a quick example. The basic idea is to hide the actual checkbox, use a :before pseudo class with a checkmark inside it, set the checkmark to transparent when the radio is not checked, and set the color when the radio is checked.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input[type='checkbox'] {
            display:none;
        }
        label {
            display:inline-block;
            vertical-align: middle;
        }
        label:before {
            content:'\2713';
            display:inline-block;
            vertical-align: middle;
            width:20px;
            height:20px;
            line-height:20px;
            font-size:1.33rem;
            font-weight:bold;
            text-align: center;
            color:transparent;
            border:1px solid #333;
            margin:0 6px 0 0px;
        }
        input[type='checkbox']:checked + label:before {
            color:#515151;
        }
    </style>
</head>
<body>
    <input type="checkbox" id="checker">
    <label for="checker">LABEL</label>
</body>
</html>
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Styling the label or a pseudo-element for the label is the way to go because you don't need to recreate the click/change event for the checkbox itself.

I think Huston Hedinger probably decided to do it with the spans so he could show how easy it is with Angular to do this (rather than with additional CSS).