after big search I got this  code 

$(document).ready(function(){
        $('#program').wrap("<div class='wrapper'></div>");
        $('.wrapper').after("<div class='selectArrow'/>");
        $('.wrapper').find('select').mousedown(function(){
               
$(this).parent().next().addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
               
$(this).parent().next().removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
                $(this).parent().next().addClass('selectArrow-mouseover');
        }, function(){
               
$(this).parent().next().removeClass('selectArrow-mouseover');
        });

        $('.selectArrow').click(function(){
                $(this).prev().find('select').focus();
        });

        $('.selectArrow').mousedown(function(){
               
$(this).addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
        }).
        mouseup(function(){
               
$(this).removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
        }).
        hover(function(){
                $(this).addClass('selectArrow-mouseover');
        }, function(){
                $(this).removeClass('selectArrow-mouseover');
        });
    });


css for this 

    .wrapper{
        display: inline;
        float: left; 
        width: 180px; 
        overflow: hidden; 
    }
    .selectArrow{
        display: inline;
        float: left;
        width: 17px;
        height: 20px;
        border:1px solid #7f9db9;
        border-left: none;
        background: url('images/selectArrow.png') no-repeat 1px 1px;
    }
    .selectArrow-mousedown{background:
url('images/selectArrow-mousedown.png') no-repeat 1px 1px;}
    .selectArrow-mouseover{background:
url('images/selectArrow-mouseover.png') no-repeat 1px 1px;}


attached is the image of   my problem 
http://old.nabble.com/file/p26870017/program.png 
see the image does    not align with the height of dropdown , please help me
.
please help me resolve this   

Charlie Tomlinson wrote:
> 
> 
> 
> 
> 
> 
> IE gives limited support to what you can do to style selects. As
> suggested use a plugin, of which there are many, that convert select's
> to alternate html yet retain similar functionality 
> 
> fachhoch wrote:
> 
>   that did not help me , I tried    google search but none of them worked
> for
> me , please, jquery experts tell me how to CONTROL WIDTH of dropdown IN IE
> ,
> 
> 
> 
> 
> Scott Sauyet-2 wrote:
>   
>   
>     You might look at a plug-in like:
> 
>     http://code.google.com/p/dropdown-check-list/ 
> 
> Good luck,
> 
>   -- Scott
> 
> 
>     
>   
>   
>   
> 
> 
> 
> 
> 

-- 
View this message in context: 
http://old.nabble.com/huge-drop-down-tp26720940s27240p26870017.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

Reply via email to