• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    纯css为select添加样式(无脚本)实现
    改变select默认的样式，一般情路情况下通过ul,li来模拟来实现。
    有很多Jquery插件就是通过这样的方式来改变select默认样式的。
    根据程序哥哥那边的反映，此种方式在form提交后无法获取数据，后来经过实验，用了不同的JS/Jquery插件，都是同样的结果：无法获取数据。

    后来看一篇外国人写的 博客，用css的样式来实现 在select外面添加一个div，设置select的宽度小于父级div的宽度，然后通过设置div的background属性，改变select默认箭头的样式。
    此种方法不失为一个好方法，不写脚本，只用单纯的css来实现。

    不过这种方法也是有瑕疵的，就是在IE系列下，选中某个选项的时候会有背景色块，IE7-IE10都有此bug。
    在Opera下，设置div的背景图不显示，也就是select的下拉箭头不显示，这个不知道是什么原因所致。
    以下代码

    复制代码
    代码如下:

    <div class="select_style">
    <select name="select">
    <option>AAAAAAAAAAA</option>
    <option>BBBBBBBBBBB</option>
    <option selected>CCCCCCCCCCC</option>
    <option>DDDDDDDDDDD</option>
    </select>
    </div>


    复制代码
    代码如下:

    .select_style {width:240px; height:30px; overflow:hidden; background:url(../images/arrow.png) no-repeat 215px;
    border:1px solid #ccc;
    -moz-border-radius: 5px; /* Gecko browsers */
    -webkit-border-radius: 5px; /* Webkit browsers */
    border-radius:5px;
    }
    .select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px;
    -webkit-appearance: none; /*for Webkit browsers*/
    }
    上一篇：html4和html5区别之如何在一个input上添加焦点实现代码
    下一篇：iframe的src赋值问题(服务器端)
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    纯css为select添加样式(无脚本)实现 纯,css,为,select,添加,样式,