aboutsummaryrefslogtreecommitdiff
path: root/build/dynamic-checkboxes
diff options
context:
space:
mode:
Diffstat (limited to 'build/dynamic-checkboxes')
-rw-r--r--build/dynamic-checkboxes/index.html409
1 files changed, 409 insertions, 0 deletions
diff --git a/build/dynamic-checkboxes/index.html b/build/dynamic-checkboxes/index.html
new file mode 100644
index 0000000..9adb9f2
--- /dev/null
+++ b/build/dynamic-checkboxes/index.html
@@ -0,0 +1,409 @@
+<!doctype html>
+<html lang="en" id="top">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="icon" href="data:,">
+ <title>Dynamic Checkboxes</title>
+ <link href="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
+ <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style>
+</head>
+
+<nav>
+ <a href="#menu">Menu &darr;</a>
+</nav>
+
+<main>
+<h1>Dynamic Checkboxes</h1>
+<p>2019-07-30</p>
+<p>Checkboxes are used quite frequently on forms across the web. Whether you're selecting a pricing plan during a site's sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p>
+<p>What if we could make everyday checkboxes more beautiful <em>and</em> more intuitive? <em>It's easier than you think</em>. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.</p>
+<p>Let's get into it.</p>
+<h2>What we are building</h2>
+<p>Take a look and play around with the CodePen below to get an idea of what we are going to build. The premise is a simple add-on pricing form which calculates the additional monthly total to the user in real-time.</p>
+<p><a href="https://codepen.io/bradleytaunt/pen/rXWEpy/">Live CodePen Example</a></p>
+<h2>The Structure (HTML)</h2>
+<p>As always, we will start by breaking down the "bones" of the HTML structure for this checkbox form. Let's take a look at the HTML in it's entirety (don't worry, it is a lot more simple than it seems at first glance):</p>
+<pre><code>&lt;h2&gt;Add-ons&lt;/h2&gt;
+
+&lt;input class=&quot;checkbox-btn&quot; name=&quot;checkbox-collection&quot; id=&quot;checkbox-1&quot; type=&quot;checkbox&quot; value=&quot;49&quot;&gt;
+&lt;label class=&quot;checkbox-label&quot; for=&quot;checkbox-1&quot;&gt;
+ &lt;span&gt;
+ White-labeled Domain
+ &lt;em&gt;Use your own custom domain with SSL security included.&lt;/em&gt;
+ &lt;/span&gt;
+ &lt;span&gt;$49/mo&lt;/span&gt;
+&lt;/label&gt;
+
+&lt;input class=&quot;checkbox-btn&quot; name=&quot;checkbox-collection&quot; id=&quot;checkbox-2&quot; type=&quot;checkbox&quot; value=&quot;49&quot;&gt;
+&lt;label class=&quot;checkbox-label&quot; for=&quot;checkbox-2&quot;&gt;
+ &lt;span&gt;
+ API Access
+ &lt;em&gt;Make API calls to perform custom serving and account actions.&lt;/em&gt;
+ &lt;/span&gt;
+ &lt;span&gt;$49/mo&lt;/span&gt;
+&lt;/label&gt;
+
+&lt;input class=&quot;checkbox-btn&quot; name=&quot;checkbox-collection&quot; id=&quot;checkbox-3&quot; type=&quot;checkbox&quot; value=&quot;349&quot;&gt;
+&lt;label class=&quot;checkbox-label&quot; for=&quot;checkbox-3&quot;&gt;
+ &lt;span&gt;
+ Priority Support
+ &lt;em&gt;A dedicated account manager to assist your team with ongoing deployments.&lt;/em&gt;
+ &lt;/span&gt;
+ &lt;span&gt;$349/mo&lt;/span&gt;
+&lt;/label&gt;
+
+&lt;div class=&quot;total-cost&quot;&gt;
+ &lt;h2&gt;Your Plan&lt;/h2&gt;
+ &lt;div&gt;
+ &lt;span&gt;$&lt;/span&gt;
+ &lt;span id=&quot;total-cost-inner&quot;&gt;0&lt;/span&gt;
+ &lt;input id=&quot;output&quot; type=&quot;text&quot; value=&quot;0&quot; disabled/&gt;
+ &lt;span&gt;/mo&lt;/span&gt;
+ &lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+<h3>The checkbox inputs &amp; labels</h3>
+<pre><code>&lt;!-- #1 --&gt;
+&lt;input class=&quot;checkbox-btn&quot; name=&quot;checkbox-collection&quot; id=&quot;checkbox-1&quot; type=&quot;checkbox&quot; value=&quot;49&quot;&gt;
+
+&lt;!-- #2 --&gt;
+&lt;label class=&quot;checkbox-label&quot; for=&quot;checkbox-1&quot;&gt;
+
+ &lt;!-- #2i --&gt;
+ &lt;span&gt;
+ White-labeled Domain
+ &lt;em&gt;Use your own custom domain with SSL security included.&lt;/em&gt;
+ &lt;/span&gt;
+
+ &lt;!-- #2ii --&gt;
+ &lt;span&gt;$49/mo&lt;/span&gt;
+
+&lt;/label&gt;
+</code></pre>
+<ol>
+<li><p>This input will be hidden via <code>position:absolute</code> by default. All checkbox inputs need to share the same <code>name</code> value and all checkboxes require their our custom <code>id</code> that will link with the corresponding <code>for</code> value on the label.</p>
+</li>
+<li>This label needs it's <code>for</code> value to correspond with it's partnered checkbox.</li>
+</ol>
+<p> - i) The first span holds the title and description information of the add-on
+ - ii) The last span holds the cost associated with the current add-on</p>
+<h3>The total cost container output</h3>
+<pre><code>&lt;!-- #1 --&gt;
+&lt;div class=&quot;total-cost&quot;&gt;
+
+ &lt;h2&gt;Your Plan&lt;/h2&gt;
+
+ &lt;!-- #2 --&gt;
+ &lt;div&gt;
+
+ &lt;!-- #2i --&gt;
+ &lt;span&gt;$&lt;/span&gt;
+
+ &lt;!-- #2ii --&gt;
+ &lt;span id=&quot;total-cost-inner&quot;&gt;0&lt;/span&gt;
+
+ &lt;!-- #2iii --&gt;
+ &lt;input id=&quot;output&quot; type=&quot;text&quot; value=&quot;0&quot; disabled/&gt;
+
+ &lt;!-- #2iv --&gt;
+ &lt;span&gt;/mo&lt;/span&gt;
+
+ &lt;/div&gt;
+
+&lt;/div&gt;
+</code></pre>
+<ol>
+<li><p>A simple <code>div</code> with a class we can easily target later</p>
+</li>
+<li><p>A <code>div</code> parent container is needed to house all the total <code>spans</code> together (more on this when we get into the CSS)
+ - i) The first <code>span</code> holds the static currency symbol
+ - ii) The second <code>span</code> is where our updated cost will be injected
+ - iii) This input field is required for us to take-in the <code>value</code> of the associated <code>:checked</code> inputs and add them together. This current value is then used for the injection into the second <code>span</code>
+ - iv) The final <code>span</code> simply holds the static monthly duration content</p>
+</li>
+</ol>
+<p>All that's all we need for the HTML!</p>
+<h2>The Visuals (CSS)</h2>
+<p>Again, lets take a look at the entire file before we break it down step-by-step:</p>
+<pre><code>.checkbox-label {
+ align-items: center;
+ background-color: none;
+ border: 1px solid lightgrey;
+ border-radius: 5px;
+ cursor: pointer;
+ display: flex;
+ font-weight: 600;
+ justify-content: space-between;
+ margin: 0 auto 10px;
+ padding: 20px 20px 20px 70px;
+ position: relative;
+ transition: .3s ease all;
+ width: 100%;
+}
+.checkbox-label span:last-child {
+ padding: 0 0 0 20px;
+}
+.checkbox-label:hover {
+ background-color: rgba(255,255,255,0.2);
+}
+.checkbox-label:before {
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 15px;
+ border: 1px solid lightgrey;
+ border-radius: 50%;
+ content:'';
+ height: 30px;
+ left: 20px;
+ position: absolute;
+ top: calc(50% - 15px);
+ transition: .3s ease background-color;
+ width: 30px;
+}
+.checkbox-label:hover:before {
+ background-image:
+ url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;23.571429&quot; height=&quot;23.571429&quot; viewBox=&quot;0.000000 -47.142857 23.571429 23.571429&quot;&gt;&lt;path fill=&quot;lightgrey&quot; d=&quot;M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286&quot;&gt;&lt;/path&gt;&lt;/svg&gt;');
+}
+.checkbox-label span {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+.checkbox-label span em {
+ display: block;
+ font-size: 80%;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 1.2;
+}
+.checkbox-btn {
+ position: absolute;
+ visibility: hidden;
+}
+.checkbox-btn:checked + .checkbox-label {
+ background-color: white;
+ border-color: mediumpurple;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+.checkbox-btn:checked + .checkbox-label:before {
+ background-color: mediumpurple;
+ background-image:
+ url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;25.948661&quot; height=&quot;19.888393&quot; viewBox=&quot;2.025670 -40.011161 25.948661 19.888393&quot;&gt;&lt;path fill=&quot;white&quot; d=&quot;M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232&quot;&gt;&lt;/path&gt;&lt;/svg&gt;');
+ border-color: mediumpurple;
+}
+
+.total-cost {
+ align-items: baseline;
+ border-top: 1px solid lightgrey;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 40px;
+ padding: 40px 20px 0;
+}
+.total-cost div {
+ align-items: baseline;
+ display: flex;
+}
+.total-cost span:nth-child(1) {
+ align-self: flex-start;
+ padding-top: 5px;
+}
+.total-cost span:nth-child(2) {
+ font-size: 32px;
+ font-weight: bold;
+}
+.total-cost input {
+ display: none;
+}
+
+@media(max-width:480px) {
+ .checkbox-label {
+ align-items: flex-start;
+ flex-direction: column;
+ flex-wrap: wrap;
+ }
+ .checkbox-label span:last-child {
+ padding: 10px 0 0 0;
+ }
+}
+</code></pre>
+<h3>The checkbox label</h3>
+<pre><code>/*
+This is the main element for each checkbox &quot;container&quot;.
+Inside it houses the title, description and price.
+*/
+.checkbox-label {
+ align-items: center;
+ background-color: none;
+ border: 1px solid lightgrey;
+ border-radius: 5px;
+ cursor: pointer;
+ display: flex;
+ font-weight: 600;
+ justify-content: space-between;
+ margin: 0 auto 10px;
+ padding: 20px 20px 20px 70px;
+ position: relative;
+ transition: .3s ease all;
+ width: 100%;
+}
+.checkbox-label:hover {
+ background-color: rgba(255,255,255,0.2);
+}
+
+/* Update the label styling when the input is :checked */
+.checkbox-btn:checked + .checkbox-label {
+ background-color: white;
+ border-color: mediumpurple;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+</code></pre>
+<h3>The custom checkbox input</h3>
+<p>We need to hide the browser's default checkbox input and replace it with our own using pseudo selectors.</p>
+<pre><code>/* Hide browser default input */
+.checkbox-btn {
+ position: absolute;
+ visibility: hidden;
+}
+
+/* Our custom input checkbox */
+.checkbox-label:before {
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 15px;
+ border: 1px solid lightgrey;
+ border-radius: 50%;
+ content:'';
+ height: 30px;
+ left: 20px;
+ position: absolute;
+ top: calc(50% - 15px);
+ transition: .3s ease background-color;
+ width: 30px;
+}
+
+/*
+Here we add a simple '+' icon on hover
+to our custom pseudo element.
+Adding it as an inline SVG gives us the
+ability to fully customize it's styling
+*/
+.checkbox-label:hover:before {
+ background-image:
+ url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;23.571429&quot; height=&quot;23.571429&quot; viewBox=&quot;0.000000 -47.142857 23.571429 23.571429&quot;&gt;&lt;path fill=&quot;lightgrey&quot; d=&quot;M23.571429 -36.964286L23.571429 -33.750000C23.571429 -33.303571 23.415179 -32.924107 23.102679 -32.611607C22.790179 -32.299107 22.410714 -32.142857 21.964286 -32.142857L15.000000 -32.142857L15.000000 -25.178571C15.000000 -24.732143 14.843750 -24.352679 14.531250 -24.040179C14.218750 -23.727679 13.839286 -23.571429 13.392857 -23.571429L10.178571 -23.571429C9.732143 -23.571429 9.352679 -23.727679 9.040179 -24.040179C8.727679 -24.352679 8.571429 -24.732143 8.571429 -25.178571L8.571429 -32.142857L1.607143 -32.142857C1.160714 -32.142857 0.781250 -32.299107 0.468750 -32.611607C0.156250 -32.924107 0.000000 -33.303571 0.000000 -33.750000L0.000000 -36.964286C0.000000 -37.410714 0.156250 -37.790179 0.468750 -38.102679C0.781250 -38.415179 1.160714 -38.571429 1.607143 -38.571429L8.571429 -38.571429L8.571429 -45.535714C8.571429 -45.982143 8.727679 -46.361607 9.040179 -46.674107C9.352679 -46.986607 9.732143 -47.142857 10.178571 -47.142857L13.392857 -47.142857C13.839286 -47.142857 14.218750 -46.986607 14.531250 -46.674107C14.843750 -46.361607 15.000000 -45.982143 15.000000 -45.535714L15.000000 -38.571429L21.964286 -38.571429C22.410714 -38.571429 22.790179 -38.415179 23.102679 -38.102679C23.415179 -37.790179 23.571429 -37.410714 23.571429 -36.964286ZM23.571429 -36.964286&quot;&gt;&lt;/path&gt;&lt;/svg&gt;');
+}
+
+/*
+When the checkbox input is :checked we need to
+update the inline SVG to use a checkmark symbol
+*/
+.checkbox-btn:checked + .checkbox-label:before {
+ background-color: mediumpurple;
+ background-image:
+ url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;25.948661&quot; height=&quot;19.888393&quot; viewBox=&quot;2.025670 -40.011161 25.948661 19.888393&quot;&gt;&lt;path fill=&quot;white&quot; d=&quot;M27.974330 -36.127232C27.974330 -35.680804 27.818080 -35.301339 27.505580 -34.988839L15.385045 -22.868304L13.108259 -20.591518C12.795759 -20.279018 12.416295 -20.122768 11.969866 -20.122768C11.523438 -20.122768 11.143973 -20.279018 10.831473 -20.591518L8.554688 -22.868304L2.494420 -28.928571C2.181920 -29.241071 2.025670 -29.620536 2.025670 -30.066964C2.025670 -30.513393 2.181920 -30.892857 2.494420 -31.205357L4.771205 -33.482143C5.083705 -33.794643 5.463170 -33.950893 5.909598 -33.950893C6.356027 -33.950893 6.735491 -33.794643 7.047991 -33.482143L11.969866 -28.543527L22.952009 -39.542411C23.264509 -39.854911 23.643973 -40.011161 24.090402 -40.011161C24.536830 -40.011161 24.916295 -39.854911 25.228795 -39.542411L27.505580 -37.265625C27.818080 -36.953125 27.974330 -36.573661 27.974330 -36.127232ZM27.974330 -36.127232&quot;&gt;&lt;/path&gt;&lt;/svg&gt;');
+ border-color: mediumpurple;
+}
+</code></pre>
+<h3>The total cost container</h3>
+<p>We only need some very basic flexbox styling for our bottom "total" container:</p>
+<pre><code>.total-cost {
+ align-items: baseline;
+ border-top: 1px solid lightgrey;
+ display: flex;
+ justify-content: space-between;
+ margin-top: 40px;
+ padding: 40px 20px 0;
+}
+.total-cost div {
+ align-items: baseline;
+ display: flex;
+}
+.total-cost span:nth-child(1) {
+ align-self: flex-start;
+ padding-top: 5px;
+}
+.total-cost span:nth-child(2) {
+ font-size: 32px;
+ font-weight: bold;
+}
+
+/*
+This input is used in our JavaScript - look at the
+function part of this post to understand why
+*/
+.total-cost input {
+ display: none;
+}
+</code></pre>
+<h3>Last but not least - mobile</h3>
+<p>Now we just ensure that on smaller devices our checkbox labels render nicely:</p>
+<pre><code>@media(max-width:480px) {
+ /*
+ Avoids the inner label content from squishing together
+ and becoming unreadable
+ */
+ .checkbox-label {
+ align-items: flex-start;
+ flex-direction: column;
+ flex-wrap: wrap;
+ }
+ .checkbox-label span:last-child {
+ padding: 10px 0 0 0;
+ }
+}
+</code></pre>
+<p>That's it for the styling!</p>
+<h2>The Function (JS)</h2>
+<p>As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost "injection".</p>
+<pre><code>window.onload=function(){
+
+// Place the default browser checkbox inputs into a variable
+var inputs = document.getElementsByClassName('checkbox-btn')
+
+// Now we loop through the inputs and check if they are
+// greater than zero. If so, we run our function.
+for (var i=0; i &lt; inputs.length; i++) {
+
+ inputs[i].onchange = function() {
+
+ // Create `add` variable which takes the :checked input value
+ var add = this.value * (this.checked ? 1 : -1);
+
+ // We grab the current total value on our hidden input field and return it
+ // as a floating point number
+ // (since in this use case it will be a price number based on currency)
+ var new_total = parseFloat(document.getElementById('output').value);
+
+ // Now we simply add the existing total value with the newly &quot;:checked&quot; input value
+ var updated_total = document.getElementById('output').value=new_total + add
+
+ // Place the new updated total directly inside the `total-cost-inner` span element
+ document.getElementById('total-cost-inner').innerHTML = updated_total;
+ }
+
+}
+}
+</code></pre>
+<p>That's it! Feel free to play with the demo some more at the top of the post, or check out the <a href="https://codepen.io/bradleytaunt/pen/rXWEpy">CodePen source directly</a>.</p>
+<footer role="contentinfo">
+ <h2>Menu Navigation</h2>
+ <ul id="menu">
+ <li><a href="/">Home</a></li>
+ <li><a href="/projects">Projects</a></li>
+ <li><a href="/uses">Uses</a></li>
+ <li><a href="/wiki">Wiki</a></li>
+ <li><a href="/resume">Resume</a></li>
+ <li><a href="/colophon">Colophon</a></li>
+ <li><a href="/now">Now</a></li>
+ <li><a href="/donate">Donate</a></li>
+ <li><a href="/atom.xml">RSS</a></li>
+ <li><a href="#top">&uarr; Top of the page</a></li>
+ </ul>
+ <small>
+ Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
+ Maintained with ♥ for the web. <br>
+ Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> &amp; <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
+ The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
+ </small>
+</footer> \ No newline at end of file