1MB Club: 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.

The 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

.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!

1MB Club

Pure CSS Simple Dropdown Plugin

The HTML

The CSS

Special Thanks