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

Custom Select Box, using CSS and Jquery

It was July when I posted my last blog.  Was fullllllll busy with work and festivals.   Few days back I was preparing a HTML for a design provided by a client.  And the design was containing a select box with mastttt design.   So styling a select box is not possible with normal CSS.  You can style everything with the CSS except that right arrow.  So, google was the only hope and as usual I found the solution.  So, thought of sharing with you all.

HTML for the select box

<select class="select" title="Select one">
                <option></option>
                <option>Blue</option>
                <option>Red</option>
                <option>Green</option>
                <option>Yellow</option>
                <option>Brown</option>
</select>

CSS for the select box

/* setting the width and height of the SELECT element to match the replacing graphics */
select.select{
        position:relative;
        z-index:10;
        width:166px !important;
        height:26px !important;
        line-height:26px;
}

/* dynamically created SPAN, placed below the SELECT */
span.select{
    position:absolute;
    bottom:0;
    float:left;
    left:0;
    width:166px;
    height:26px;
    line-height:26px;
    text-indent:10px;
    background:url(selectBG.gif) no-repeat 0 0;
    cursor:default;
    z-index:1;
    }

you must make an image of size 166px X 26px.  The size of the select box and the background image which you are going to place as the select box should be same.  You can see the CSS for span.select{...}, I have used a background image selectBG.gif.

      Finally, the javascript you should use to make your customized select box. Use the following javascript and don't forget to include latest jquery file.

<script type="text/javascript">
    $(document).ready(function(){   

        if (!$.browser.opera) {   
            // select element styling
            $('select.select').each(function(){
               var title = $(this).attr('title');
                if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
                $(this)
                    .css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
                    .after('<span class="select">' + title + '</span>')
                    .change(function(){
                        val = $('option:selected',this).text();
                        $(this).next().text(val);
                        })
            });
        };       
    });
</script>

Following is the screen shot of the select box.  The black rounded select box in the screen shot is selectBG.gif which I used in the background of the select element.

I hope it is going to help you!! Byeeeeeeeeeeee and and dont forget to......

Share Your Solutions