Free Code Friday: CSS3 Clean Select Field Styling

Free Code Friday: CSS3 Clean Select Field Styling

As browsers get more rendering features, we as designers can take more advanced approaches to UI styling. Since I deal with a lot of intake forms I’ve always hated how select boxes look, so I decided to start taking action.

My examples are a simple, clean, modern metro UI style but of course you can easily modify it to your design.

 
 
 
 

HTML Code

<blockquote class="greyBlock"><span class="downWhite"></span> <select class="whiteInset"> <option>Select Box </option> <option>Short Option</option> <option>Little Bit Longer</option> <option>A Much Longer Option</option> </select> </blockquote>

CSS Code

.metroUIform blockquote { clear: both; margin: 15px 0; width: 50%; position: relative; z-index: 1; /* set the position */ overflow: hidden; } .metroUIform select { padding:8px 0px 8px 8px; margin: 0; width: 111%; /* so the default is always fixed right and under our span */ height: 39px; background: none; border:none; outline:none; display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; position: relative; top:0; left: 0; z-index: 10; /* select has to be above the span so its clickable */ font-size: 1em; } .metroUIform select option{padding: 8px;} /* firefox only show this*/ @media (-webkit-min-device-pixel-ratio: 2){ .metroUIform select{ width: 100%;} } /* Webkit-based browsers are recognizing appearance none right now so we can push back the width */ .metroUIform blockquote span { position: absolute; top:0; right: 0; z-index: 5; float: right; width: 39px; /* ICON WIDTH */ height: 39px; /* ICON HEIGHT */ } /* STYLES */ .downWhite{background: url(https://www.revitalagency.com/blog/wp-content/uploads/2013/03/expand-down-white.png) center center no-repeat;} .bordered{ border-radius: 8px 8px 0 0; /*moz have dropdown come out the bottom so it looks cooler with no border radius*/ -webkit-border-radius: 8px; } /* block colors */ .greyBlock{background: #bbb;} .greyBlock select option{background: #aaa;} .greenBlock{background: #5DB371;} .greenBlock select option{background: #51a364;} .blueBlock{background: #5899ad;} .blueBlock select option{background: #4c8b9e;} .orangeBlock{background: #edac1f;} .orangeBlock select option{background: #d9a025;} /* select colors */ .whiteInset{color:#FFF; text-shadow: -1px -1px 0px #666;}

Internet Explorer Tweaks

Of course Internet Explorer has to play by its own set of rules. I tested on IE 9 only. So please feel free to post other tweaks below.

.metroUIform select option:first-child{background: none;}

Derek Corneau

Written by:

Derek’s positive attitude makes him an invaluable asset to Revital Agency. As Web Coordinator, he handles any online creative efforts and social media interactions with ease.

SUBSCRIBE TO THE REVITAL AGENCY BLOG

GET FREE MARKETING TIPS & UNCOVER
THE BEST WAYS TO GROW YOUR BUSINESS.

Enter your email address below: