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.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

SUBSCRIBE TO THE REVITAL AGENCY BLOG

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

Enter your email address below: