Create Byline Dropdown with airSlate SignNow

Pack dropdown notice

[Music] on the top this is the default HTML select control and we're going to create the one that's on the bottom with animation and everything and yeah let's get to it first I'm going to create the basic HTML tags the body the head and the doctype for html5 now I'm going to save the file and I'm gonna double click on it to load it side-by-side with my editor now I'm just testing it now I'm gonna create the drop down and function notice that I capitalize the first letter of it that indicates that I'm gonna instantiate it now I'm gonna create a div container for our drop down now notice the drop down has an object that I sent as a parameter I'm gonna send it the ID DD 1 now notice the drop down function that we created we're using it just like a class I'm gonna set it to member variables first I set its options to the parameter that we passed in and now I'm going to set its init function which acts just like a constructor it's the first function that gets called when the object gets created and again the reason I'm using that this keyword is so that when we instantiate the function each one will have its own unique functions and variables now inside this thought element I'm just gonna put in the DD 1 div that we created and inside that div I'm gonna dynamically create HTML the HTML is basically just gonna be the different types of elements inside this control so I'm gonna have a drop down class have a drop down value and an arrow this is the main box that we click on and notice that I put this inside HTML template strings I'm gonna pass in the initial value of cat we're gonna get it from the options just like we did the ID and here I'm going to use the dollar sign because we're using HTML template strings and if you notice when i refresh that it says cat on the right side now I'm just gonna style the body and give it a little bit more gray now I'm gonna style the drop down this is the main box that we click on that holds the value and the arrow so I'm just gonna give it a border of width and a height background of light and I'm gonna give it a box shadow as well a border radius so that it's not going to be square slightly darker color and I'm gonna give it a line height of 30 so that the content sits right vertically in the center and I make it so that you can't select texture on it and I'm just gonna change the cursor pointer and make a display inline so that it doesn't pick up the entire line set its fonts so for now I'm gonna style the drop down value which is fairly cat...