Merge Countersign Dropdown with airSlate SignNow

Merge countersign dropdown

[Music] for this video i'll be showing you how to style an html select with a custom drop down in a way that you will not compromise accessibility and still have a beautiful drop down as you can see here i have here a select tag with three options one two and three and on the css i have a style for the body and that's what's making everything stay center as you can see on the right i also set box size and border box for all elements on the page to make sure any size i set will take in consideration the padding and border of the element and i will also extend this to include all pseudo elements as well the first thing i need to do is wrap the select tag in a label to implicit associated with the select i'll give it a class of custom select and include a label for the select as well and this will not compromise the select accessibility and i'll show you how this implicit association can be beneficial as we go now let's add this label and i'll position it relative because i'll be positioning things absolute to it later on and i'll make it an inline block element with 14 pixels grey font size select tags are actually easy to style and it works like any other stack if i inspect it you can see that there is not much to it so i'll make it 200 pixels wide height minimum of 35 and give it a light blue background with the sky blue border i removed the outline that browser normally sets on it this is just a preference of mine you can leave it if you want especially if you want the user to know which elements has focus when they click the keyboard tab key but you can also set it to a staff of your liking i'll add padding left and right only give it a pointer cursor and distance it five pixels from the above text one thing i don't like is this error because it is hard to deal with so i'll just remove it by setting appearance none and what you can also do is include prefixed appearance like dash webkit appearance moss and ms so it looks the same for all browsers now i'll be creating my own error indicator using the after sudo element and i'll attach it to the labels wrapper since you can't add pseudo elements to the select tags and this is another advantage of wrapping it in a label tag it will have no content and size and i'll use the old border trick to create triangles by making the board of 5 pixels solid and transparent and i'll just add the color to the side i want and it will be the top so the arrow points down if i change which border to color we can see the effect and it simply...