Custom Select Box using CSS only

I hope you read my last blog, custom select box using jquery and css.  If you haven't  then no need to worry, here I am with a better solution to the same problem.  Customising a select box using jquery and CSS was conflicting with other jquery and javascript codes.  In a single page with jquery dedicated to select box only was working well.  But when I used it in a project it wasn't.  So a little bit of more effort and here's the solution, select box customised using CSS only and with CSS no need to worry about the conflicts and all.

Here's the HTML for the select box:

<div class="styled-select">
   <select>
      <option>Select One</option>
      <option>Blue</option>
      <option>Red</option>
      <option>Green</option>
      <option>Yellow</option>
      <option>Brown</option>
   </select>
</div>

Here's the CSS for the select box:

.styled-select select {
   background: transparent;
   width: 166px;
   padding: 3px 0px 4px 9px;
   font-size: 11px;
   border: none;
   height: 25px;
   color:#efefef;
}

.styled-select {
   width: 144px;
   height: 25px;
   overflow: hidden;
   background: url(selectBG.png) no-repeat;
   border:none;
}

     You can see the HTML, the select box is placed in a div with a class name "style-select".  That  div is styled with a background image selectBG.png.  The image width is 144px where as the select box is with a width of 166px.   The width of the container div i.e. styled-select should be less than the width of the select box, this way you can hide the drop down arrow of the select box which is impossible to style whereas rest of the select box can be easily styled.  Following is the screen shot of the combo box.

Share Your Solutions