Marko
Marko

Reputation: 57

Custom styled select box

I am trying to use a script for custom styled select boxes, and as I have plenty entries inside one of select box I need to make but am stuck in creation of scrolling function ( a script that counts the number items and if it's over X then need to bre some Overflow attribute to the UL that the script is creating.) any solution for this?

Upvotes: 1

Views: 922

Answers (2)

Mike Boutin
Mike Boutin

Reputation: 5357

There's a good way to do it ! ^^ I just made it few seconds ago ;)

HTML

<div class="styledSelect">
                <span class="styledSelectValue"></span>
                <select name="type">
                    <option value="">Par type de propriété</option>
                    <option value="choix2">choix2</option>
                    <option value="choix3">choix3</option>
                </select>
            </div>

CSS

.styledSelect{/*your css for the background image... it will be the body of your select*/}
.styledSelect select{/*your css with opacity:0;*/}
.styledSelectValue{/*the css of the received value*/}

jQuery

$('.styledSelect').each(function(){
            selectValue = $(this).children("select").val();
            if(selectValue == ""){selectValue = $(this).children("select").children("option:eq(0)").text();}
            $(this).children(".styledSelectValue").text(selectValue);
        });
        $('.styledSelect select').change(function(){
            selectValue = $(this).val();
            if(selectValue == ""){selectValue = $(this).children("option:eq(0)").text();}
            $(this).parent(".styledSelect").children(".styledSelectValue").text(selectValue);
        });

It's the best way i found ;)

Upvotes: 1

niksvp
niksvp

Reputation: 5563

There is no such direct option for overflow control, browser will automatically manage with the document height.

In order to do that, you can use jQuery Dropdown Replacement and apply skins from the link you have.

Upvotes: 1

Related Questions