自定义的html select标签

2011-10-21 16:54  1665人阅读  评论 (0)
Tags: html

IE系列下渲染html的select标签时不能定义边框颜色,导致select标签影响网页整体效果,无奈只能自己写一个模拟的select了。

CSS样式:

.Jselect {position: relative;}
.Jselectvalue {text-align:left;text-indent:8px;display:inline-block;border:1px #DDD solid;width:80px;height:30px;margin:0 6px;}
.Joption {display:none;position:absolute;left:6px;top:30px;width:80px;height:200px;border:1px #DDD solid;background-color:white;overflow:auto;}
.Joption li {float:none;}

javascript脚本:用的jquery-1.6.4

$(function(){
    $('.Jselect').data().outhideid = 0;
    $('.Jselectvalue').click(function(){
        $(this).next().toggle();
    });
    $('.Joption li').hover(function(){
        $(this).css('background-color', '#EEE');
    }, function(){
        $(this).css('background-color', 'white');
    }).click(function(){
        $(this).parent().prev().text($(this).text());
        $(this).parent().next().val($(this).text());
        $(this).parent().hide();
    });
    $('.Jselectvalue, .Joption').hover(function(){
        clearTimeout($(this).parents('.Jselect').data().outhideid);
    }, function(){
        var that = this;
        var outhide = function(){
            $(that).parents('.Jselect').find('.Joption').hide();
        };
        $(this).parents('.Jselect').data().outhideid = setTimeout(outhide, 300);
    });
});

html标签:

<li class="Jselect">
    <span class="Jselectvalue" style="width:70px;">18岁</span>
    <ul class="Joption" style="width:70px;">
        <li>18岁</li>
        <li>19岁</li>
        <li>20岁</li>
        <li>21岁</li>
        <li>22岁</li>
        <li>23岁</li>
        <li>24岁</li>
        <li>25岁</li>
        <li>26岁</li>
        <li>27岁</li>
        <li>28岁</li>
        <li>29岁</li>
        <li>30岁</li>
        <li>31岁</li>
    </ul>
    <input type="hidden" id="age_start" name="age_start" value="" />
</li>