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

    效果例如以下图:


  • 相关阅读:
    状态机
    折半查找函数
    宽字符与多字符相互转换
    安装交叉编译工具
    make menuconfig提示'make menuconfig' requires the ncurses libraries.
    IIC总线
    关于文字编码
    傅里叶变换
    韦东山视频_第27课_dma设备驱动程序
    linux内核宏之——-PERF_ALIGN
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/7283661.html
Copyright © 2011-2022 走看看