CSS-Only Toggle

[MUSIC] 0:00 Hey everyone. 0:09 I'm Dustin, and I'm back with another quick guide for you. 0:09 Today, I'll show you how to transform this ordinary checkbox input 0:13 to a responsive toggle switch with just CSS. 0:18 Toggle switches are a great way to show a UI state, and 0:21 you've probably seen them just about everywhere, 0:24 from websites and mobile apps to your phone or computer's operating systems. 0:26 Be sure to check out teamtreehouse.com/blog for 0:31 a written version of this tutorial. 0:35 Alternatively, you can also check out our GitHub repo for 0:37 this project at github.com/treehouse. 0:41 I'll have links to both down below in the teacher's notes or 0:44 description of this video, as well as a link to our CodePen if you just wanna take 0:47 a look at the code really quick. 0:51 If you'd like to follow along with me, let's get started. 0:53 To get started, hop into your projects HTML file, and 0:56 make sure that it includes a input with a type of checkbox. 1:00 I have a container wrapped around mine, and that's okay, 1:04 I'm only using that to center it on the page. 1:07 You just need to make sure you have your input with the type of checkbox. 1:10 Once you have that, you can open your project style sheet, and 1:14 you can start by setting up a new input rule. 1:18 And the first property value that we'll set up in here is 1:22 a webkit-appearance of none. 1:24 And if you aren't familiar with this, 1:26 it basically hides the default styles for a UI element. 1:28 So if you hit Save, you should see it disappear. 1:32 Next, we'll set it up with a position of relative. 1:36 And that's so that when we set up the circle inside of our toggle switch, 1:39 we can position that absolute relative to the parent, which is the input element. 1:43 We'll give it a width and a height, and then we can set up a border-radius 1:48 of 25 pixels, with a light background-color of gray. 1:53 So when we click on our checkbox, it will turn from gray to green. 1:58 So we can do is set up a transition property for the background for 2:01 .3 seconds so that the background color change is subtle. 2:05 Next, we can set up our outline with none. 2:11 And we can set up a cursor of pointer. 2:14 That way, when we hover over our checkbox, we'll have a nice pointer cursor. 2:17 Now, we'll wanna set up the actual circle inside of our toggle switch. 2:22 And we can do that by using the after pseudo-element. 2:26 We'll give it an empty content, and we'll position it absolute. 2:29 And it'll be absolutely positioned relative to its parent, 2:34 which is the input. 2:38 We can give it a top 50% and left of 30. 2:39 And you can play around with these numbers as you wish. 2:42 This is just what I'm going with. 2:44 We'll set up the transform to translate -50% on both the x and 2:47 y axis with a border radius of 50%. 2:52 We'll set up our height and width with 1.25 rem, and 2:55 we'll give it a background-color of white. 2:59 We'll also transition the left property, .3 seconds. 3:02 Hit Save, and now you should see a toggle switch. 3:06 But clicking it doesn't actually do anything. 3:10 We don't need JavaScript for this. 3:13 We can actually toggle the checked state of this input by writing some CSS. 3:14 So we can use the checked pseudo-class on the input and 3:20 give it a background color of green. 3:23 We'll hit Save, and now when we check our checkbox, it should turn green. 3:26 Next, we can target the after pseudo-element when the input is checked 3:30 by writing input with the checked pseudo-class and after pseudo-element. 3:34 And we'll give it the left property 70% so 3:39 that when we click our toggle switch, the toggle will go from 30% to 70%. 3:42 And there we go. 3:48 We have a responsive toggle switch just using CSS. 3:49 Remember, this is still just a regular checkbox input. 3:53 So you can still grab its value with JavaScript when building out your web page 3:56 or app, if you need to. 4:00 There surely are tons of ways to create toggle switches. 4:01 [SOUND] This is just how I like to do them, and 4:04 I find it's pretty quick and easy. 4:06 I hope this guide helped. 4:08 And don't forget to check out the description or teacher's notes of 4:10 this video to get links to our blog, GitHub, and CodePen for this project. 4:13 Until next time, have fun, and happy coding. 4:17

You need to sign up for Treehouse in order to set up Workspace

Sign up