zoukankan      html  css  js  c++  java
  • 改动select默认样式,兼容IE9

    前面有篇文章已经提供了怎样改动select标签的默认样式,可是仅仅能兼容到ie10,要兼容ie9仅仅能模拟一个类似的

    html结构:

    <div class="select_diy">
                                        <select>
                                            <option value="产品咨询1">产品咨询1</option>
                                            <option value="产品咨询2">产品咨询2</option>
                                            <option value="产品咨询3">产品咨询3</option>
                                            <option value="产品咨询4">产品咨询4</option>
                                        </select>
                                        <div class="select_diy_select"></div>
                                    </div>

    css样式:

    .contactus2_con select{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance:none;
        background:none;
        background:url("../images/select.jpg") right center no-repeat;
        background:white9;
        490px;
        border:1px solid #d9d9d9;
        height:30px;
        cursor:pointer;
    }
    .contactus2_con select::-ms-expand{
        color: #fff;
        font-size:20px;
        padding:5px 9px;
        background: #0054a7;
    }
    .select_diy{
        position:relative;
        490px;
    }
    .select_diy_select{
        position:absolute;
        top:0px;
        right:0px;
        37px;
        height:30px;
        background:url("../images/select.jpg") center center;
        border-radius:0px 4px 4px 0px;
        cursor:pointer;
    }

    js:

     $(".select_diy_select").click(function(){
                    
    var $target = $(this).siblings("select");
    var $clone = $target.clone();
    $clone.val($target.val()).css({
    position: 'absolute',
    'z-index': 999,
    $target.width(),
    left: $target.offset().left,
    top: $target.offset().top + $target.height()
    }).attr('size', $clone.find('option').length).change(function() {
    $target.val($clone.val());
    }).on('click blur',function() {
    $(this).remove();
    });
    $('body').append($clone);
    $clone.focus();  
                });

    效果例如以下图:


  • 相关阅读:
    编译原理词/语法分析
    【转】 c# 中为何load事件中不能画图
    [原创]GAMITGLOBK数据处理报告
    Google Earth上的点标记
    序贯平差
    【原创】C#写的水准网平差程序
    楼梯问题:一次最多跨两个阶梯,有多少种走法
    springMVC + Dubbo + zooKeeper超详细 步骤
    Git(to be continued...)
    autoconf & automake
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/7283661.html
Copyright © 2011-2022 走看看