开发者

Custom styled select box

I am trying to use a 开发者_JAVA技巧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?


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.


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 ;)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜