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

Free Code Friday: CSS3 Clean Select Field Styling

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.

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 */
}

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