Free Code Friday: CSS3 Clean Select Field Styling | Revital Agency
Skip to main content

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.oyova.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;}