Video instructions and help with filling out and completing Where Form 2220 Toggle

Instructions and Help about Where Form 2220 Toggle

In this tutorial we'll look at how to make the old checkbox into a cool slider toggle as always the process is quite straightforward let's begin by first creating the traditional checkbox for this tutorial we'll wrap our elements in a div but you can use the form tag as well so here we have our check box we may not have noticed but to activate the check box we can click either on the box or on the label this ability to click on the label is crucial to our tutorials functionality if we take away the label wording we can only click the box but take note that the label is still present only the text has been removed so let's create a new label class called my label give it the position of relative display:block with 60 pixels height 30 pixels and margin bottom 15 pixels add this class to your label tag notice nothing visible happens because there is no text for the moment now let's create a sliding groove element which will act as our dynamic checkbox or toggle switch set the position to absolute top right bottom and left to zero and we'll give it a gray background and a border radius of 20 pixels let's add this to a checkbox element and give our containing div or form if you like the class of my label as well and there you have a toggle holder groove we also need to add a slider button for our ui/ux effect so let's create a pseudo class of sliding groove : after give it a position of absolute content empty within height 28 pixels white background border radius 50 percent so it's a circle and one pixel from the top and left of the toggle holder okay looking good so far but right now it's just a div there's no functionality we link that in the next step before we do however we need to remove the checkbox element just like we remove the label text if we make the background of our toggle switch element transparent you can see the checkbox behind our slider groove we don't want to see the checkbox element we just want its functionality so we set the display of the checkbox to none remember the checkbox element is still present in the HTML and therefore still functional let's set our sliding groove div element back to the way it was to link the check box to our sliding groove div we use a simple CSS property input : checked + sliding groove all this means is that when the checkbox is clicked do something to the element that comes immediately after the input element in this case are sliding groove div which will change color from gray to green when the label is clicked we'd like to have a bit of an effect presumably a fade in and fade out effect which we can achieve using CSS transition property we also want the round white button to move over so we again add input : checked + dot sliding groove after and give it the transform translate X property value pairing when the label is clicked in this case we'd like the round button to move over left and right by 30 pixels the groove changes color and the button moves left to right as required to smoothen out the effect we can simply add a transition with the timing of 0.3 seconds to both classes finally to add the label text let's type coding in paragraph tags within the label notice the text goes exactly over where the label is which is our clickable area to move it we simply give the paragraph tag a class and adjust the position styling and size accordingly in this case we'll move the paragraph tag over left by 65 pixels increase the font size to 16 pixels make the color slightly lighter than total black and give it a nicer font Music you can click either on the div or on the label text the label is slightly higher than where I'd want it to be so let's make a few more alterations that's looking good let's add a few more checkbox options by copying pasting the code and updating each value let's call the second one design and the third option gameplay it's easy to make your checkboxes feel dynamic the code snippet for this tutorial is in the comments if you have any questions please ask thanks for watching and CSS you next time