Showcare Checkbox Field with airSlate SignNow

Outline checkbox notice

hello this is Chris Minich with web Decatur in this video I'm going to show you some checkbox trickery using CSS this video is inspired by a blog post by will Boyd which is available at the URL shown here HTML check boxes can be styled in some really creative ways using just CSS no javascript is required for any of the tricks shown in this video first let's examine a basic HTML check box input this is a simple checkbox with a label the value of the label matches the ID on the input element so the clicking on the label will toggle the check box this is important because we're going to use CSS to hide the check box notice that I'm hiding the input by positioning an off-screen rather than by using display none the reason is that using display none would cause it to be ignored by screen readers and keyboard tabbing with the input hidden we can now proceed to do some really interesting things with the styling of the label with a selector we're using the checked pseudo class along with the adjacent sibling selector to say that we want to apply styles to the label that comes right after a checked checkbox in this first demo at the URL shown here we use this basic formula to turn regular check boxes into something more impressive these are all still check boxes and if you wrap them in a form element they will behave exactly like standard HTML check boxes and submit just like you'd expect you can also use CSS to dynamically hide and show parts of a form based on whether check boxes are checked as shown in this demo notice that the check pseudo class works on radio buttons the same as check boxes here's the HTML for the how did you hear about us radio buttons and here we show and hide the element after the other button when it's checked you we can also use the same technique to create a folder tree widget as shown in this demo here here's the HTML for a single folder the label element is the folder and the 2a elements are the files within it using font awesome icons we can indicate open and closed States we use the tilde selector which selects siblings to display the files within the folder when the input is checked finally we use a form reset input to uncheck the form fields and collapse the tree view CSS can also be used to split items into separate lists depending on whether or not they're checked this is useful for a to-do list as shown in the demo at this URL you the final demo shows how to use checkboxes and CSS to do group filtering the demo shown here highlights a cross-section of data that matches the selected criteria you can view examine and play around with a code for each of these demos at the...