前面有篇文章已经提供了怎样改动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:white\9\0;

    width: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;

    width:490px;

}

.select_diy_select{

    position:absolute;

    top:0px;

    right:0px;

    width: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,

width:$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();
 

            });

效果例如以下图:

改动select默认样式,兼容IE9的更多相关文章

  1. 修改radio、checkbox、select默认样式的方法

    样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...

  2. 取消select默认样式

    /*清除select默认样式*/select { border: solid 1px #CACDD0; appearance:none; -moz-appearance:none; -webkit-a ...

  3. css取消input、select默认样式(手机端)

    IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...

  4. css修改select默认样式

    先来看看效果图: css: <style media="screen"> .select_demo, .select_list { width: 400px; heig ...

  5. 修改select默认样式

    http://www.qkzone.com/code/2015-11-26/1.html

  6. 【css】 如何修改select的样式

    select { /*清除select默认样式*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appear ...

  7. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  8. css美化select标签,兼容ie10 ie10+,chrome。但不支持ie9 ie9-

    让ie9 ie9+ 和非ie的浏览器加载这个hack.ie8,ie8- 就用自己的默认样式 <!-- email:416960428@qq.com author:李可 --> <!- ...

  9. select去掉默认样式

    今天遇到的问题,并在这里做一下记录和总结 去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px ...

随机推荐

  1. 允许IIS下载无后缀文件及“请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理。”的解决方法

    1)增加MIME类型 ,如下 application/octet-stream 2)注意是"." , ".*"则适用于任何有文件后缀时使用,无后缀请不要加*

  2. 中南大学2019年ACM寒假集训前期训练题集(基础题)

    先写一部分,持续到更新完. A: 寒衣调 Description 男从戎,女守家.一夜,狼烟四起,男战死沙场.从此一道黄泉,两地离别.最后,女终于在等待中老去逝去.逝去的最后是换尽一生等到的相逢和团圆 ...

  3. LINUX:Contos7.0 / 7.2 LAMP+R 下载安装Php篇

    文章来源:http://www.cnblogs.com/hello-tl/p/7569071.html 更新时间:2017-09-21 16:03 简介 LAMP+R指Linux+Apache+Mys ...

  4. python中正则表达式与模式匹配

    一.前言 在之前找工作过程中,面试时经常被问到会不会python,懂不懂正则表达式.心里想:软件的东西和芯片设计有什么关系?咱也不知道因为啥用这个,咱也不敢问啊!在网上搜索到了一篇关于脚本在ASIC领 ...

  5. vscode调试angular2

    调试步骤: 1.安装nodejs 2.安装vscode 3.vscode安装debugger for chrome插件 4.选择调试->打开调试配置,选择chrome配置,打开lauch.jso ...

  6. 【Codeforces 444A】DZY Loves Physics

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 两个点的子图他们的"密度"是比所有联通生成子图都要大的 "只要胆子大,遇到什么问题都不怕!" [代码] ...

  7. 关于测试驱动的开发模式以及实战部分,建议看《Python Web开发测试驱动方法》这本书

    关于测试驱动的开发模式以及实战部分,建议看<Python Web开发测试驱动方法>这本书

  8. [luoguP1136] 迎接仪式(DP)

    传送门 每个字母只有两种选择,变成另一个或者不变. 所以f[i][j][k]表示前i个字母有j个j变成z,有k个z变成j 只需要比较j==k时的答案就行 #include <cstdio> ...

  9. poj 3648 2-sat 输出任意一组解模板

    转载地址:http://blog.csdn.net/qq172108805/article/details/7603351 /* 2-sat问题,题意:有对情侣结婚,请来n-1对夫妇,算上他们自己共n ...

  10. 2018/2/18 SpringCloud Eureka的学习和spirng ribbon的部分源码追踪

    昨天对于Eurake大致做了一个介绍,今天就来说说具体怎么配置和使用吧. 首先,我们创建一个服务注册中心 这是它的配置文件 注意,因为我等下还会弄一个Eureka注册中心,所以这里service-ur ...