DEV Community: Branden

DEV Community: Branden The latest articles on DEV Community by Branden (@branden). https://dev.to/branden https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1089882%2Fb8c2ac72-773c-41a5-b1c0-392e82615f42.png DEV Community: Branden https://dev.to/branden en How to style a <select/> tag the easy way. Branden Mon, 29 May 2023 13:55:33 +0000 https://dev.to/branden/how-to-style-a-tag-the-easy-way-3iie https://dev.to/branden/how-to-style-a-tag-the-easy-way-3iie <h1> How to style a <code><select/></code> tag the easy way. </h1> <ul> <li>Problem</li> <li> The Hard Way <ul> <li>Build your own</li> <li>Import from a Library</li> </ul> </li> <li> The Easy Way <ul> <li>The Mask</li> <li>Code</li> <li>Result</li> </ul> </li> <li>Conclusion</li> </ul> <h2> Problem </h2> <p>Form controls are notoriously difficult to style, this is especially true with the <code><select/></code> tag. Between the browsers Firefox respects your style choices the most, followed by Chrome, then Web-kit. The results can be seen below.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Fn9a9CO5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://github.com/palmerusaf/blog/blob/main/01-Style-Select-Tag/problem-demo.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Fn9a9CO5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://github.com/palmerusaf/blog/blob/main/01-Style-Select-Tag/problem-demo.png%3Fraw%3Dtrue" alt="problem demo" width="800" height="420"></a></p> <p>As you can see above Web-kit in particular is a mess.</p> <p>And if you want to style/remove elements inside the select box you can forget about it. WYSIWYG.</p> <h2> The Hard Way </h2> <p>We have a couple of options here.</p> <ol> <li>Build a custom select component from scratch.</li> <li>Import a custom select component from a library.</li> </ol> <h3> Build your own </h3> <p>If you need absolute control over all parts of your select component, then building from scratch is the way to go. This CSS-Tricks <a href="https://css-tricks.com/striking-a-balance-between-native-and-custom-select-elements/">article</a> is an excellent resource if you want to go that route.</p> <p>The drawback to this approach is that building your own is not trivial, especially if you plan on making it responsive.</p> <h3> Import from a Library </h3> <p>If you go this route you can save lots of time. If it's a popular library you benefit from experienced UI designers and A/B testing. One popular option is <a href="https://mui.com/material-ui/react-select/">Material UI</a>.</p> <p>One of the drawbacks is that you're at the mercy of the maintainer. You will also have to take the time to learn the library's API. The component might not fit exactly with your existing styling and it can be difficult to customize. You also could be shipping lots of unnecessary code.</p> <h2> The Easy Way </h2> <p>What if all you want to do is style your select button and you don't care if the select options are styled?</p> <p>Just make a mask.</p> <h3> The Mask </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EeptI666--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://github.com/palmerusaf/blog/blob/main/01-Style-Select-Tag/mask-meme.jpg%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EeptI666--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://github.com/palmerusaf/blog/blob/main/01-Style-Select-Tag/mask-meme.jpg%3Fraw%3Dtrue" alt="mask meme" width="502" height="497"></a></p> <p>A mask, also known as a wrapper, is a stylable non-semantic element that goes over your select tag. The idea is you style the div however you want and then you sneak your select tag inside it like a ninja.</p> <h3> Code </h3> <p>This is what the HTML would look like.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"select-container"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"angle-bracket rotate-left"</span><span class="nt">></span> <span class="ni">&lt;</span> <span class="nt"></span></span> <span class="nt"><span></span>Select<span class="nt"></span></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"angle-bracket rotate-right"</span><span class="nt">></span> <span class="ni">&gt;</span> <span class="nt"></span></span> <span class="nt"><select</span> <span class="na">class=</span><span class="s">"hidden-select"</span><span class="nt">></span> <span class="nt"><option</span> <span class="na">selected</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>Select<span class="nt"></option></span> <span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>Value 1<span class="nt"></option></span> <span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Value 2<span class="nt"></option></span> <span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Value 3<span class="nt"></option></span> <span class="nt"></select></span> <span class="nt"></div></span> </code></pre> </div> <p>And this is what the CSS would look like.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight css"><code><span class="nc">.select-container</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="py">gap</span><span class="p">:</span> <span class="m">2px</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">2px</span> <span class="m">4px</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#ccc</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">9999px</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.angle-bracket</span> <span class="p">{</span> <span class="nl">transition-duration</span><span class="p">:</span> <span class="m">300ms</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.select-container</span><span class="nd">:hover</span> <span class="nc">.rotate-left</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">-90deg</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.select-container</span><span class="nd">:hover</span> <span class="nc">.rotate-right</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">90deg</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.hidden-select</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <h3> Result </h3> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2uZgn0lg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://github.com/palmerusaf/blog/blob/main/01-Style-Select-Tag/solution-demo.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2uZgn0lg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://github.com/palmerusaf/blog/blob/main/01-Style-Select-Tag/solution-demo.png%3Fraw%3Dtrue" alt="solution demo" width="800" height="420"></a></p> <h2> Conclusion </h2> <p>Using a div as a mask, along with positioning tricks, is much easier than trying to fight the browsers. Anyways, I hope you found this article helpful. Let me know what you think in the comments.</p>