diff options
Diffstat (limited to 'build/easy-custom-radio-inputs/index.html')
| -rw-r--r-- | build/easy-custom-radio-inputs/index.html | 43 |
1 files changed, 2 insertions, 41 deletions
diff --git a/build/easy-custom-radio-inputs/index.html b/build/easy-custom-radio-inputs/index.html index c96a469..fcf9196 100644 --- a/build/easy-custom-radio-inputs/index.html +++ b/build/easy-custom-radio-inputs/index.html @@ -3,11 +3,12 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="color-scheme" content="dark light"> <link rel="icon" href="data:,"> <title>Easy Custom Radio Inputs</title> <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> -<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> </head> <nav> @@ -16,23 +17,14 @@ <main> <h1 id="easy-custom-radio-inputs">Easy Custom Radio Inputs</h1> - <p>2019-01-21</p> - <p>Default radio inputs are notoriously horrible looking and are something designers tend to over-think when trying to customize them. Let’s walk through how to create custom radio buttons with <em>pure CSS</em>, while still preserving performance and accessibility.</p> - <h2 id="the-final-product">The Final Product</h2> - <p>This is what we will be designing:</p> - <p><img src="/public/images/custom-radio-inputs.png" alt="Custom radio inputs" /></p> - <p><a href="https://codepen.io/bradleytaunt/pen/oNjwMyX">Live CodePen Example</a></p> - <hr/> - <h2 id="the-bones-of-our-radio-inputs-html">The bones of our radio inputs (HTML)</h2> - <pre><code><input class="radio-btn" name="radio-collection" id="radio-1" type="radio"> <label class="radio-label" for="radio-1"><span>I am very satisfied</span></label> @@ -48,39 +40,25 @@ <input class="radio-btn" name="radio-collection" id="radio-5" type="radio"> <label class="radio-label" for="radio-5"><span>I am very unsatisfied</span></label> </code></pre> - <p>I know it looks like a lot is going on here, but it’s pretty straightforward so let’s unpackage line by line:</p> - <h3 id="radio-inputs">Radio inputs</h3> - <pre><code><input class="radio-btn" name="radio-collection" id="radio-1" type="radio"> </code></pre> - <p>This is the default <code>radio</code> input. We give it:</p> - <ul> <li>a <code>name</code> (inputs with a shared <code>name</code> are grouped together)</li> <li>an <code>id</code> (so our label can target this input)</li> <li>a <code>class</code> (so we can style it later)</li> </ul> - <p><strong>Important</strong>: be sure to have a unique <code>id</code> for each input so your labels don’t end up connected to multiple radios. In this demo we are simply incrementing them by one.</p> - <h3 id="labels">Labels</h3> - <p>Adding the labels is fairly straightforward, we just include the corresponding input’s <code>id</code> in the label’s <code>for</code> attribute. The label content is wrapped in a <code>span</code> - which I will explain the reasoning for later.</p> - <p>For styling purposes we also add the <code>radio-label</code> class.</p> - <pre><code><label class="radio-label" for="radio-1"><span>I am very satisfied</span></label> </code></pre> - <p>This is looking pretty terrible - but that’s nothing some good ol’ CSS can’t fix!</p> - <h2 id="the-flesh-of-our-radio-inputs-css">The flesh of our radio inputs (CSS)</h2> - <p>First we give some basic styling to our <code>label</code> and <code>input</code> classes (along with hover states). The <code>radio</code> element is actually hidden from view, but by using the <code>visibility</code> attribute we still keep it accessible for screen-readers.</p> - <pre><code>.radio-label { background: white; border: 1px solid #eee; @@ -104,18 +82,14 @@ visibility: hidden; } </code></pre> - <p>Remember that <code>span</code> element inside the label? We set it’s <code>user-select</code> property to <code>none</code> so we avoid any possible issue with the user selecting the text on-click:</p> - <pre><code>.radio-label span { -webkit-user-select: none; -moz-user-select: none; user-select: none; } </code></pre> - <p>Next we include the default empty selection element (to mimic the original radio input) via a pseudo element:</p> - <pre><code>.radio-label:before { background: #eee; border-radius: 50%; @@ -129,13 +103,9 @@ width: 30px; } </code></pre> - <h2 id="a-few-final-steps">A Few Final Steps</h2> - <p>The final step is adding the custom styling for when an <code>input</code> item is selected (<code>:checked</code>).</p> - <p>You will notice the use of a <code>base64</code> element for the custom checkmark - feel free to subsitute this for an actual image or none at all (this is just my personal design preference).</p> - <pre><code>.radio-btn:checked + .radio-label { background: #ECF5FF; border-color: #4A90E2; @@ -148,11 +118,8 @@ background-size: 15px; } </code></pre> - <p><strong>And that’s it.</strong></p> - <p>For easier reference the entire CSS file can be found below:</p> - <pre><code>.radio-label { background: white; border: 1px solid #eee; @@ -202,15 +169,10 @@ background-size: 15px; } </code></pre> - <hr/> - <h2 id="but-wait---we-can-get-even-fancier">But wait - we can get even fancier!</h2> - <p>Since this demo is based off a survey-type questionaire, wouldn’t it be interesting to give the different selectable options their own styling based on their context? Take a look at the further customized version below:</p> - <p>We can do so by adding <code>positive</code>, <code>neutral</code> and <code>negative</code> class names to the radio inputs with their own respective properties:</p> - <pre><code>.radio-btn.positive:checked + .radio-label { background: #EAFFF6; border-color: #32B67A; @@ -230,7 +192,6 @@ background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); } </code></pre> - <p>I hope this shows new designers that simple custom radio inputs aren’t so hard to implement after-all and can actually be pretty fun to design.</p> <footer role="contentinfo"> <h2>Menu Navigation</h2> |