Style a Select Box Using CSS

Recently while working on new design for cellbazaar mobile which will only load on smart phone, I found way to design select box only using text-indent and text-overflow. BTW -moz-appearance does not work in Firefox :(. So this implementation is necessary when you are designing custom select box.

My plan is to make this into

This
null
This

Into this

Here is css code

.styled-select {
   width:100px;
   overflow: hidden;
   background: #F8F8F8;
   border: 1px solid #DDDDDD;
   height: 30px;
   border-radius:2px;
 }

.styled-select select {
  width: 100%;
  border: 0;
  line-height: 1.5;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  appearance: none;
  background: transparent url("/img/smart_arrows.png") no-repeat scroll 97% 8px;
  @media (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) {
      background: transparent url("/img/smart_arrows@2x.png") no-repeat scroll 97% 8px;
      background-size: 16px 144px;
    }
}

Basically the .styled-select container div which will hold the select box. It’s overflow property is hidden so if the select box moves to right it wont show any bars. So the html code is like this

<div class="styled-select">
  <select >  
    <option value="">From</option> 
  </select>
</div>

If you are wondering about “@media (-webkit-min-device-pixel-ratio: 2)” see this Retina displays High Resolution Background Image.

About Zakir Hyder

This entry was written by .

05. November 2013 by Zakir Hyder
Categories: CSS, HTML | Tags: , , , , , | Comments