CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。

  1. select {
  2. /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
  3. border: solid 1px #000;
  4. /*很关键:将默认的select选择框样式清除*/
  5. appearance:none;
  6. -moz-appearance:none;
  7. -webkit-appearance:none;
  8. /*在选择框的最右侧中间显示小箭头图片*/
  9. background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
  10. /*为下拉小箭头留出一点位置,避免被文字覆盖*/
  11. padding-right: 14px;
  12. }
  13. /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
  14. select::-ms-expand { display: none; }

参考链接:
http://uplifted.NET/programming/change-default-select-dropdown-style-just-css/

修改select样式的更多相关文章

  1. IE10修改select样式

    一般我们针对webkit内核的,都使用-webkit-appearance来控制一些表单元素. 但是IE10如何来控制呢? select::-ms-expand{display:none;}

  2. 修改select样式,vue select

    <style> .selectbox{ width: 200px; display: inline-block; overflow-x: hidden; height: 28px; lin ...

  3. css修改select下拉列表的默认样式

    select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码: <div> <select name=""> & ...

  4. 修改 页面中默认的select样式

    select样式定制: select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择 ...

  5. 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解

    一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...

  6. 打造自定Select样式

    打造自定Select样式 我们为什么要自定义select样式? 1.select最大的一个缺陷就是不能自定义下拉按钮的样式. 效果图: 在线演示地址: http://www.smallui.com/j ...

  7. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  8. MFC学习 修改窗口样式

    1. 在PreCreateWindow中可用CREATESTRUCT cs, cs.lpszName修改窗口标题, cs.lpszClass = AfxRegisterWndClass 修改图标与样式 ...

  9. SELECT样式,兼容IE6

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. mvn 修改所有子项目pom版本

    mvn versions:set -DgenerateBackupPoms=false -DnewVersion=1.3.0

  2. mex

    edit(fullfile(prefdir, 'mexopts.bat')) http://www.mathworks.cn/support/solutions/en/data/1-8FJXQE/in ...

  3. php 处理ftp常用操作与方法

    原文地址:https://www.cnblogs.com/longfeiPHP/p/5420632.html $ftp_conn = ftp_connect("192.168.1.230&q ...

  4. Win10系列:VC++ XML文件解析

    XML文件按照元素标记来存储数据,通过遍历这些元素标记可以得到XML文件中所保存的数据.在C++/CX的类库中并未定义用于解析XML文件的类,但C++提供了能解析XML文件的框架和类库,如msxml4 ...

  5. Oracle exists 和not exists 用法详解

    有两个简单例子,以说明 “exists”和“in”的效率问题 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; ...

  6. Django ajax提交 登录

    一.url from django.contrib import adminfrom django.urls import pathfrom appo1 import views urlpattern ...

  7. vue-5-列表渲染

    一个数组的v-for<ul id="example-1"> <li v-for="item in items"> {{ item.mes ...

  8. :策略模式--Duck

    原则:封装变化的部分:针对超类编程,不针对实现:多组合少继承: #ifndef __DUCK_H__ #define __DUCK_H__ #include "FlyBehavior.h&q ...

  9. BCM5396的SPI理解

    参考文档链接:https://pan.baidu.com/s/1kuXJmULwtjOW1TeOuTRPQQ *时钟极性和相位 BCM538X / BCM5396用于根据以下标准发送/接收SPI数据: ...

  10. 数控AGC实现(转)

    相关链接:    一种混合式高动态范围AGC算法与FPGA实现     http://www.sohu.com/a/221438387_781333 基于FPGA的快速自动增益控制系统设计      ...