Learn how to convert the appearance of checkboxes into switches, which gives your users a more visual indication of the options they’re selecting. Styling form, label, and div elements can really enhance your user's experience. You can set the color and shape and even use transition properties for a little animation.
- [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 added this attribute down here in the HTML. This way we can see the selected and unselected states when we're working in the CSS. Now before we begin working in the CSS we're going to need to add some additional HTML into each one of the label elements, so that we have something to create our switches out of.
So inside of the first label element after the input field let's hit a Return and let's add a div element. So <div and the tag and then let's end the element. Now we'll select it, let's come down to the second label, let's hit a Return after the input, paste our div, and then down to the third one, and do the same thing. So now we have a div element inside of each of the label elements that appears immediately after the input elements.
And so now with these div elements in place let's save our HTML, let's go back to the Exercise Files, and let's open up style.css in our text editor. So now in our CSS file let's scroll down to the bottom. After the label selector let's create a rule that targets the div elements inside of the label element. So we'll start with label space div, then another space, put in our brackets, let's come in here and define some properties for that div element.
And we'll start with the display type. We're going to set this to an inline-block. Next line we're going to set a width property, we're going to set this to 45 pixels wide. Next we'll set the height to 24 pixels. Next we're going to set a position property, we're going to set this to absolute. Then on the next line we're going to set a top property to negative 1 pixels. Next we'll set a left property, we'll set this to 0.
Then we're going to set a border radius, so border-radius, we're going to set this to 16 pixels. Then we're going to set a border property. So we'll type border: space, first property's going to be the size, we'll set this to 2 pixels. For the style we'll set solid, then a space, then for the color we'll use the rgba colorspace, so rgba, put in our parentheses, then inside of the parentheses 255 for red, 255 for green, 255 for blue, which will give us white, and then .6 for the alpha.
And then finally I'll want the background color to animate, so we're going to use the transition property. So we'll type transition: space, background-color, then a space, we're going to put .3s for .3 seconds, then a ;. So now with these CSS properties in place save your CSS file, go back to the browser, hit reload, and you'll now see these rounded corner ovals that we've created that are now positioned to the left side of each label element.
So now we'll use a pseudo-element to add the indicator dot inside of these div elements. So in the CSS let's scroll down, let's create another rule, label space div, then :: then the word after, put in our brackets, split this open. First we'll start with a content property, we'll set this to null, so just '' and a ;. Next we're going to set the display type, we'll set this to a block.
Next we'll set a position property of absolute. Then a top property of 4 pixels, a left property of 5 pixels, then we'll set a width of 16 pixels, then we'll set a height of 16 pixels, giving us a perfect square. And then to turn this into a circle we'll set a border-radius of 50%. And then the final two properties will be the background color and the transition property.
So on the next line we'll set background-color. We're going to use rgba here as well, so put in rgba and the parentheses. Inside we're going to set this to a 60% white, so 255 for red, 255 for green, 255 for blue, then .6 for the alpha. And then finally the transition property. We're going to transition the position of this indicator. So we're going to set transition: space, left, then a space, a we'll set it to .3 seconds.
So it transitions with the same amount of time that we transition the background color up here. So with these in place save your CSS. If we go back to the browser we'll now see that the indicator is now inside of the ovals for each one of the elements. And so now we need to move our indicator based on whether or not the checkbox is in a checked state. And we'll use the adjacent sibling selector to do this. So back to our CSS, after our pseudo-element, let's come in here and let's type label space, then we'll target the input elements, then a :, then type the word checked, so this is a pseudo class that an input gets if it's in a checked state.
Then a space, then a + sign, and then div. So what we're doing here is targeting that div element that appears immediately after the input field. So if the input field is in its checked state we can target this div element. So next we'll put in our brackets, we'll split this open, the first thing we'll set is going to be border-color. We're going to change border-color to # and fff. And then next we'll change the background-color to be green.
So background-color: space, here we'll just use the rgb colorspace, and inside of the parentheses for red we're going to set this to 0,200 for green, and 0 for blue. So with this CSS rule in place save your CSS file, go back to the browser and hit reload. We'll now see that the one div element that appears after the checkbox that's in a checked state now has a green background. And so now that we've targeted the indicator container let's come back to our CSS and let's target the indicator itself.
So we'll type label space, input:checked, then a space, then we're going to target the div element, so + div, then ::, we're going to target the same pseudo-element, so we'll type the word after, put in our brackets, and then inside here we're going to set the left property. And we're actually going to use a calculation here, so that if we change the width of the container we won't have to go in here and change the position of the indicator.
So we'll target the left property, : space, then we'll type calc, C-A-L-C, put in our parentheses and a ;, inside of the calculation we're going to take 100% and we're going to subtract 21 pixels. So 100% minus 21 pixels. Then on the next line we're going to set our background-color to this as well. So the background-color of the indicator is going to be white, so # and fff.
And then finally we'll hide the original checkboxes. So we'll create one more rule down here after the input that targets the indicator, label space input, put in our brackets, set a display type of none. Then with all of those in place save your CSS, go back to the browser, and we'll see that the div element with the indicator if it follows an item with an input in its checked state we get a green background and we get a full white border and we get an indicator over on the right hand side.
And then if I click these you'll see the transition of the background property and the indicator position showing up representing the checked state of each input element inside of each label. And so now that we've changed the user experience of checkboxes using CSS you may want to explore more options for styling form elements. And you can find more techniques in this course entitled Styling Form Elements, which is also available here in the library. And so with that I'll conclude this episode, and as always, thanks for watching.
Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.