From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Checkboxes to switches

Checkboxes to switches - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Checkboxes to switches

“

- [Chris] Hi, this Chris Converse and in this episode we'll convert the appearance of checkboxes into switches, which gives your users a more visual indication of the options they're selecting. Now if you'd like to following along with me download the Exercise Files and let's begin by opening index.html in a text editor. And once you have the HTML file open you'll see up in the head area we have a link to a style.css file, which we'll be opening in a moment. Inside of the body area we have a form element. Inside of the form element we have an h1, and then we have three label elements, one, two, and three. Inside of each label element we have an input field, which is the checkbox, and some text here, which acts as the label. Now the reason we have these inside of a label is so that if I come over to the browser and click on anything inside of the label this will activate the checkbox. And when you load the page you'll notice the Notification checkbox is already on. That's because I've…

Contents