Project - Checkbox Components

Programming requires compromise... here is an example of how ingenuity and lateral thinking can triumph over limitation and restriction.

The checkbox component is not stylable. But it has the useful property of being a bi-state component, because it is either ticked or unticked.
So web developers have circumvented the non-styling limitation, by hiding the original unstylable checkbox and creating a completely new stylable alternative on top of the old.

And if you can display your own stylable bi-state checkbox, you can display your own LED or 2-state on-off switch instead.

Take a look at "How To Style A Checkbox With CSS" by Paulund:  https://paulund.co.uk/style-checkboxes-with-css
If you scroll almost to the bottom you can click a rather insignificant "Demo" button.
All those demo items are a result of restyling the same checkbox component.
Checkbox 5 looks just like any other checkbox, but the difference is that it is completely customisable.
Checkbox 4 is an LED, so that makes it interesting as a feedback indicator.
Return to his tutorial and go to the Checkbox 4 section where he explains what is going on.
  
TIP:  When I find something interesting that I want to keep for later, I create a computer text file with an appropriate name - eg: ledcheckbox1.txt in this case - then copy and paste the articles web address url to the top.

Most of the interesting articles include interesting style examples, so encapsulating the link between /* and */ creates an embedded CSS comment of the original articles url which can accompany the code for referring to in the future if ever necessary.

Then I copy and paste just the relevent code rather than the whole article... knowing that the instructions are only a click away if needed.

Often, the code is presented as raw CSS snippets, plus an html snippet, and sometimes an accompanying javascript snippet.
Assembling it all into a workable html file, possibly with accompanying CSS stylesheet and javascript files, used to be daunting.

Then I started using some lateral thinking of my own, which made things much easier...
I had already created myself this ledcheckbox1.txt file some time ago, all copied and pasted 'as is' from the article...
/**
 * Checkbox Four
 */
.checkboxFour {
 width: 40px;
 height: 40px;
 background: #ddd;
 margin: 20px 90px;
 border-radius: 100%;
 position: relative;
 box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
/**
 * Create the checkbox button
 */
.checkboxFour label {
 display: block;
 width: 30px;
 height: 30px;
 border-radius: 100px;
 transition: all .5s ease;
 cursor: pointer;
 position: absolute;
 top: 5px;
 left: 5px;
 z-index: 1;
 background: #333;
 box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
/**
 * Create the checked state
 */
.checkboxFour input[type=checkbox]:checked + label {
 background: #26ca28;
}
<section>
  <!-- Checbox Four -->
  <h3>Checkbox Four</h3>
   <div class="checkboxFour">
    <input type="checkbox" value="1" id="checkboxFourInput" name="" />
    <label for="checkboxFourInput"></label>
   </div>
</section>

Needless to say, the code is not in a runnable condition, and would take some effort for me to turn into a runnable .html file.
But it's not necessary... we simply open any w3schools 'Tryit Editor' page which will already contain everything we need!
 
So... let's try it - in the Tryit Editor, delete all existing example html code from between the <body> and </body> tags then copy and paste (using keyboard shortcuts) the <section> to </section> code from the bottom of the saved article into the editor window between the body tags.

Now do similar for the style content - delete everything between the Tryit editors style tags and paste in everything that is above <section> from our saved article. Then click the Tryit Editors Run button, and click the resulting LED in the right hand window to see if it works ok.
Wow ... how easy was that!   No saving changes, no burned bridges, nothing to lose - simply paste in your code then view the results.

 
But wait - something is not quite right with the top left corner, so lets check to see if the original article holds any clue.
Ahha yes, there it is, right at the beginning of the article... "To start off we need to add one piece of CSS that each of the following checkboxes will need. We need to hide all the original checkboxes as we will be changing the way they look. To do this add the following into your CSS file."
/**
 * Start by hiding the checkboxes
 */
input[type=checkbox] {
 visibility: hidden;
}

So lets copy that into the top of our style section then try it again - yes, that's better.

While changes are so easy, lets make a few others, but rather than lose track of original values I prefer to comment out the original.
Let's get rid of the transition delay by commenting it out, ie:  /* transition: all .5s ease; */

Duplicate the 2 colour statements, comment out the originals, then modify the duplicates for our own preferences:
 /* background: #333; */
 background: green;
  /* background: #26ca28; */
 background: red;

Finally, get rid of the text between the h3 tags and replace it with a couple of line breaks, ie:  <h3><br><br></h3> 

Run it and check out the results of your changes.


Once you are satisfied with it, let's wrap things up by quickly turning it into a Basic script...
Do CTRL A or right-click Select All in the Tryit window, paste it into the FileManager Html Converter window, click the convert button, then click the Copy button of the output window.
Now paste it into the browsers Editor page, don't forget to add "html a$" at the bottom, then save it as something meaningful.


That's a handy 'secret' to know for quickly evaluating many interesting web examples and converting them to run on Annex-Wifi Basic...such as this slide switch.

Basic:
cls
 a=0
a$ = ""
 A$ = A$ + |<style>|
 A$ = A$ + |html {|
 A$ = A$ + |  font-size: 5vh;|
 A$ = A$ + |}|
 A$ = A$ + |body {|
 A$ = A$ + |  height: 100vh;|
 A$ = A$ + |  width: 100vw;|
 A$ = A$ + |  background: -webkit-linear-gradient(#c1cdcd, #94a8a8);|
 A$ = A$ + |  background: linear-gradient(#c1cdcd, #94a8a8);|
 A$ = A$ + |  font-family: "Open Sans", sans-serif;|
 A$ = A$ + |}|
 A$ = A$ + |#switch {|
 A$ = A$ + |  outline: none;|
 A$ = A$ + |  display: block;|
 A$ = A$ + |  -webkit-appearance: none;|
 A$ = A$ + |     -moz-appearance: none;|
 A$ = A$ + |          appearance: none;|
 A$ = A$ + |  position: relative;|
 A$ = A$ + |  width: 6rem;|
 A$ = A$ + |  height: 2rem;|
 A$ = A$ + |  background: #2e426b;|
 A$ = A$ + |  border-radius: 2rem;|
 A$ = A$ + |  appearance: none;|
 A$ = A$ + |  -webkit-filter: blur(0.4px);|
 A$ = A$ + |          filter: blur(0.4px);|
 A$ = A$ + |  box-shadow: -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6), 0.05rem 0.05rem 0.1rem #b6fbe4, inset 0.5rem 0.5rem 2rem  |
A$ = A$ + |  rgba(0, 0, 51, 0.5), inset 0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75), inset -0.5rem -0.5rem 4rem rgba(182, 251, 228, 0.5);|
A$ = A$ + |}|
 A$ = A$ + |.wrap {|
 A$ = A$ + |  display: block;|
 A$ = A$ + |  position: relative;|
 A$ = A$ + |  width: 6rem;|
 A$ = A$ + |  height: 2rem;|
 A$ = A$ + |  border-radius: 2rem;|
 A$ = A$ + |  overflow: hidden;|
 A$ = A$ + |  z-index: 1;|
 A$ = A$ + |  -webkit-transform: translatey(-100%);|
 A$ = A$ + |          transform: translatey(-100%);|
 A$ = A$ + |}|
 A$ = A$ + |label {|
 A$ = A$ + |  display: block;|
 A$ = A$ + |  position: absolute;|
 A$ = A$ + |  top: 50%;|
 A$ = A$ + |  left: 0.1rem;|
 A$ = A$ + |  width: 4rem;|
 A$ = A$ + |  height: 1.8rem;|
 A$ = A$ + |  background: #abbaba;|
 A$ = A$ + |  border-radius: 2rem;|
 A$ = A$ + |  -webkit-transform: translate3d(0%, -50%, 0);|
 A$ = A$ + |          transform: translate3d(0%, -50%, 0);|
 A$ = A$ + |  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);|
 A$ = A$ + |  transition: -webkit-transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);|
 A$ = A$ + |  transition: transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);|
 A$ = A$ + |  transition: transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 150ms cubic-bezier(0.55, 0.085, 0.68, 0.53);|
 A$ = A$ + |  -webkit-filter: blur(0.4px);|
 A$ = A$ + |          filter: blur(0.4px);|
 A$ = A$ + |  box-shadow: inset -0.05rem -0.05rem 0.08rem rgba(0, 0, 51, 0.6), inset 0.05rem 0.05rem 0.1rem #b6fbe4, 0.5rem 0.5rem |
A$ = A$ + | 2rem rgba(0, 0, 51, 0.5), 0.1rem 0.1rem 0.2rem rgba(0, 0, 51, 0.75);|
 A$ = A$ + |}|
 A$ = A$ + |#switch:checked + div label {|
 A$ = A$ + |  -webkit-transform: translate3d(1.85rem, -50%, 0);|
 A$ = A$ + |          transform: translate3d(1.85rem, -50%, 0);|
 A$ = A$ + |}|
 A$ = A$ + |.rib {|
 A$ = A$ + |  display: block;|
 A$ = A$ + |  position: absolute;|
 A$ = A$ + |  top: 50%;|
 A$ = A$ + |  left: 50%;|
 A$ = A$ + |  width: 0.35rem;|
 A$ = A$ + |  height: 1.2rem;|
 A$ = A$ + |  border-radius: 1rem;|
 A$ = A$ + |  background: #abbaba;|
 A$ = A$ + |  opacity: 1;|
 A$ = A$ + |  -webkit-transform: translate3d(-50%, -50%, 0);|
 A$ = A$ + |          transform: translate3d(-50%, -50%, 0);|
 A$ = A$ + |  box-shadow: inset -0.02rem -0.03rem 0.08rem rgba(0, 0, 51, 0.5), inset 0.03rem 0.03rem 0.1rem #b6fbe4, inset -0.02rem |
A$ = A$ + | -0.03rem 0.2rem rgba(0, 0, 51, 0.3), inset 0.03rem  0.03rem 0.2rem rgba(182, 251, 228, 0.8), 0.05rem 0.08rem 0.3rem |
A$ = A$ + | rgba(0, 0, 51, 0.3), -0.05rem -0.08rem 0.4rem rgba(182, 251, 228, 0.3), 0rem 0rem 0.2rem rgba(46, 66, 107, 0.2);|
 A$ = A$ + |}|
 A$ = A$ + |.rib:nth-child(1) {|
 A$ = A$ + |  left: 35%;|
 A$ = A$ + |}|
 A$ = A$ + |.rib:nth-child(3) {|
 A$ = A$ + |  left: 65%;|
 A$ = A$ + |}|
 A$ = A$ + |.center {|
 A$ = A$ + |  position: absolute;|
 A$ = A$ + |  top: 50%;|
 A$ = A$ + |  left: 50%;|
 A$ = A$ + |  -webkit-transform: translate3d(-50%, -50%, 0);|
 A$ = A$ + |          transform: translate3d(-50%, -50%, 0);|
 A$ = A$ + |}|
 A$ = A$ + |.sig {|
 A$ = A$ + |  position: fixed;|
 A$ = A$ + |  bottom: 8px;|
 A$ = A$ + |  right: 8px;|
 A$ = A$ + |  text-decoration: none;|
 A$ = A$ + |  font-size: 12px;|
 A$ = A$ + |  font-weight: 100;|
 A$ = A$ + |  font-family: sans-serif;|
 A$ = A$ + |  color: rgba(0, 0, 0, 0.4);|
 A$ = A$ + |  letter-spacing: 2px;|
 A$ = A$ + |}|
 A$ = A$ + |</style>|
 A$ = A$ + |<div class="center">|
 A$ = A$ + checkbox$(a, "switch")
 A$ = A$ + |  <div class="wrap">|
 A$ = A$ + |    <label for="switch"><span class="rib"></span><span class="rib"></span><span class="rib"></span></label>|
 A$ = A$ + |  </div>|
 A$ = A$ + |</div>|
 html a$
 refresh
 --------- end ----------




Comentarios