- [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.