diff options
Diffstat (limited to '_posts/2018-09-20-pure-css-simple-dropdown-plugin.md')
| -rw-r--r-- | _posts/2018-09-20-pure-css-simple-dropdown-plugin.md | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/_posts/2018-09-20-pure-css-simple-dropdown-plugin.md b/_posts/2018-09-20-pure-css-simple-dropdown-plugin.md new file mode 100644 index 0000000..9dba9ec --- /dev/null +++ b/_posts/2018-09-20-pure-css-simple-dropdown-plugin.md @@ -0,0 +1,83 @@ +--- +title: Pure CSS Simple Dropdown Plugin +date: 2018-09-20 00:00:00 Z +layout: post +column: single +description: Learn how to implement a custom select dropdown with CSS +summary: A simple, JavaScript-free way to implement a custom styled, plug-and-play + select dropdown with pure CSS. +redirect_from: "/2018/09/20/pure-css-simple-dropdown-plugin/" +--- + +I find myself blowing away default browser `select` styling and implementing my own custom dropdowns far more often than I'd like. So, I recently created a very simple and clean component using just pure CSS. + +You can find the HTML & CSS for the three different variations below: + +## The HTML + +```html +<div class="select-container"> + <select name="" id=""> + <option value="Option 1">Option 1</option> + <option value="Option 2">Option 2</option> + <option value="Option 3">Option 3</option> + </select> +</div> + +<div class="select-container shadow"> + <select name="" id=""> + <option value="Option 1">Option 1</option> + <option value="Option 2">Option 2</option> + <option value="Option 3">Option 3</option> + </select> +</div> + +<div class="select-container shadow depth"> + <select name="" id=""> + <option value="Option 1">Option 1</option> + <option value="Option 2">Option 2</option> + <option value="Option 3">Option 3</option> + </select> +</div> +``` + +## The CSS + +```css +.select-container { + background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAYCAYAAACIhL/AAAAAAXNSR0IArs4c6QAAAWBJREFUSA3Nl00OgjAQRmnDeQhwBjcu3HIIXXgZ8SpuvAJh7yW8AAnO1zTElkHaWn6a1DJ22nk2fSGKpmluSZJcqO+x1aLv+7Rt2weNhz0RCiGeRVEcJT10aZpWNL72AggWzdRJQGVZ9pZSnmjivTUkGMACJrAoQDzkeY4TrKh3iDdqqF1pFoUwACIqy/JJ9Fc1s8EHaoPhu7QBiAm6mHca6u+klZ5rXdsoJ4xIB2ubTfdOGUvj6HqNThCMSFzLbKo1GMsdFguIxDXMJjjDWC9AJC9s9shYb0AsWMpsztggQCzSdsHuWO3OGcttzlrMJcYym+7dpLFc3UlJ7OQYZs8Za9dE7AyI5H/MdjEWNezmBYjFgWY7GWvDIfYGxCJfs12Nxd52CwLEJh5mOxtrwyF2tphbPGe2r7FcjeATVL/uxzs7xNjogNiQMzvU2EUAsalldrCxHGDU7+jf4Rk95qYfkiGLtr7wLgYAAAAASUVORK5CYII=') no-repeat calc(100% - 10px) center; + background-size: 10px; + border: 1px solid #ccc; + border-radius: 5px; + cursor: pointer; + display: inline-block; + overflow: hidden; +} +.select-container select { + background: none; + border: 0; + cursor: pointer; + outline: none; + padding: 10px 40px 10px 10px; + width: 100%; + -webkit-appearance: none; + -moz-appearance: none; +} + +.select-container.shadow { + box-shadow: 0 2px 5px rgba(0,0,0,0.1); +} +.select-container.depth { + background-color: #F8F8F8; + box-shadow: 0 2px 5px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,1), inset 0 -2px 5px rgba(0,0,0,0.05); +} +``` + +Check out the CodePen below and feel free to morph it as you see fit for your own projects! + +<p data-height="465" data-theme-id="0" data-slug-hash="rZPzWy" data-default-tab="result" data-user="bradleytaunt" data-pen-title="Plug & Play Dropdown (Pure CSS)" class="codepen">See the Pen <a href="https://codepen.io/bradleytaunt/pen/rZPzWy/">Plug & Play Dropdown (Pure CSS)</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>) on <a href="https://codepen.io">CodePen</a>.</p> + +<script async src="https://static.codepen.io/assets/embed/ei.js"></script> + +* footnotes will be placed here. This line is necessary +{:footnotes} |