Build a Simple Weather App with Vanilla JavaScript

www.telerik.com telerik.com3 years ago in #Dev Love134

If we are going to style a checkbox for the future, it needs to be not only aesthetically pleasing but navigable with keyboard for screen readers. This is almost 2020, yo, let’s style like it is. There are many cool demos out there of fancy checkboxes. These all include some version of hiding the OG checkbox and styling the label and/or pseudo elements. However, many of these cool checkboxes do not take accessibility into account.  There is a marvelous man who created the https://100dayscss.com challenge and inspired me with day No. 66. I not only wanted to teach how this could be done, but how it could be done accessibly. Building the Custom Checkbox Disclaimer: There are many ways to accomplish this effect, I will be walking through just one, the way I thought up! Feel free to play around and come up with a custom way yourself. After all, that is the spirit of the 100 Day CSS Challenge! Steps Click to see the code in the steps below. First, start the Codepen, and then proceed with the following: Build out the elementsHiding the checkboxBuild checkbox with labelAnimate the checkbox on check/uncheckBuild/position expression lines with spans.Animate the expression linesTest accessibility with ChromeVoxMake things even fancierStep 1: The Checkbox & Label<div class=”frame”> <div class=”center”> <input type=”checkbox” id=”pretty-checkbox”> <label for=”pretty-checkbox”></label> </div> </div> $cb: cubic-bezier(0.17, 0.67, 0.83, 0.67); $checkbox-size: 1.5em; input[type=”checkbox”] { @extend .center; opacity: 0; pointer-events: none; & + label { @extend .center; width: $checkbox-size; height: $checkbox-size; border-radius: 50%; border: solid 2px white; cursor: pointer; box-shadow: 1px 1px 1px 1px rgba(3, 79, 32, 0.5); transition: box-shadow 0.4s $cb, background 0.4s $cb; } &:checked + label { background-color: purple; box-shadow: 1px 1px 1px 1px rgba(3, 79, 32, 0.5), 0 0 0 5px white inset; } } Here we are selecting and styling our checkbox and label for the normal and :checked states. We want the OG checkbox to disappear. We could use something like display: none; for this, however, that isn’t helpful for screen readers. So another way of accomplishing this is to give the checkbox opacity: 0; and pointer-events: none;. Usually, this alternative disappearing treatment would be accompanied by visibility: none;. However, setting the visibility to none here actually disables toggling of the label with the keyboard (which for accessibility is no bueno). So we are going to leave the visibility line off. We then are styling the label to look like this fancy version of a fill-in-bubble or checkbox: It’s selected state on &:checked + label looks like this: After this, we move onto the next step: Build/position expression lines with spans. Step 2: Expression Lines Now we are going to add 12 spans with the class of expression-lines. We can (and do) accomplish this with four spans and pseudo elements in the final Codepen, so head there if you’d like to jump straight into the deep end. For now we are starting off simple! <div class=”frame”> <div class=”center”> <input type=”checkbox” id=”pretty-checkbox”> <label for=”pretty-checkbox”></label> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> <span class=”expression-lines”></span> </div> </div> Here we have a few variables ($distance, $height, $offset) that we will use to create/position the expression lines, as well as animate them in the next step. $distance: 1.125em; // 18px $height: 1.25em; // 20px $offset: 1.25em; // 20px .expression-lines { height: $height; width: 1px; background-color: white; bottom: $distance; position: absolute; transform-origin: center $height + $distance; $lines: 12; @for $i from 1 through $lines { &:nth-of-type(#{$i}) { transform: rotate(360deg / $lines * $i); } } } We are giving each expression line…

Like to keep reading?

This article first appeared on telerik.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply