UX Designer creates beautiful mock ups that contains form elements too. They change the form elements as per the design theme they are using for whole website. Which provide decent look to your form as well as your website. But when we UI Developer start writing mark-up we stuck with the ugly browser defaults specially when it comes about select control. No more from now….
Today I will explain you really easy way to customize Select dropdown form element using purely CSS. From now, you don’t need any CSS or JavaScript fixes to achieve custom style for dropdown.
HTML Code
<div class="sel_wrap">
<select class="express_sel mrgn_b10 csel_mul" title="" >
<option value="202">0 to 1 year</option>
<option value="203">1 to 3 years</option>
</select>
<span class="arrow"><span></span></span>
</div>
CSS Code
.sel_wrap{width: 200px; height: 34px; position:relative; margin:5px 0 10px 0}
.sel_wrap .arrow { pointer-events: none; position: absolute; top:0; bottom:0; left:0; right:0; text-align: right; background:none;}
.sel_wrap .csel_mul{margin:0; height: 100%; width: 100%;}
.arrow span{background:#fff url(icon-sprite.png) -164px -289px no-repeat; width:20px; height:32px; float:right; margin:1px 1px 0 0; position:relative; }
To see live example please click here