本来没有写文章的习惯，但是闲下来了，整理资料，发现还挺纠结，对前端来说。所以整理下，希望对看到的人有所帮助，毕竟我不是前端开发。

起因，是前端告诉我select 框的三角箭头不能自定义。但是第二次的时候，以我自己的感觉中，是可以自己定义的，于是网上找到了这部分资料。

然后自己分享处理吧。

知道大家都喜欢完整的demo,所有直接粘贴吧。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>select 右边下拉箭头 demo ... 简单的56个民族</title>

    <style type="text/css">

        select {

          /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/

          border: solid 1px red;

          /*很关键：将默认的select选择框样式清除*/

          appearance:none;

          -moz-appearance:none;

          -webkit-appearance:none;

          /*在选择框的最右侧中间显示小箭头图片*/

          /*background: url("./arrow.jpg") no-repeat scroll right center transparent;*/

          /*background: url("./arrow.jpg") no-repeat scroll 170px 15px transparent;*/

          /*为下拉小箭头留出一点位置，避免被文字覆盖*/

          padding-right: 35px;

          padding-left:  4px;

          border-radius: 4px;

        }

        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/

        select::-ms-expand { display: none; }

        .test{

            width:200px;

            height:40px;

            background: url("./arrow.jpg") no-repeat scroll 170px 15px transparent;

            /*padding-right:20px;*/

        }

        .test option{

            height:30px;

            width: 200px;

            padding-left:5px;

        }

    </style>

</head>

<body>

    <select class="test">

      <option value='1'>汉族</option>

      <option value='2'>蒙古族</option>

      <option value='3'>回族</option>

      <option value='4'>藏族</option>

      <option value='5'>维吾尔族</option>

      <option value='6'>苗族</option>

      <option value='7'>彝族</option>

      <option value='8'>壮族</option>

      <option value='9'>布依族</option>

      <option value='10'>朝鲜族</option>

      <option value='11'>满族</option>

      <option value='12'>侗族</option>

      <option value='13'>瑶族</option>

      <option value='14'>白族</option>

      <option value='15'>土家族</option>

      <option value='16'>哈尼族</option>

      <option value='17'>哈萨克族</option>

      <option value='18'>傣族</option>

      <option value='19'>黎族</option>

      <option value='20'>傈僳族</option>

      <option value='21'>佤族</option>

      <option value='22'>畲族</option>

      <option value='23'>高山族</option>

      <option value='24'>拉祜族</option>

      <option value='25'>水族</option>

      <option value='26'>东乡族</option>

      <option value='27'>纳西族</option>

      <option value='28'>景颇族</option>

      <option value='29'>柯尔克孜族</option>

      <option value='30'>土族</option>

      <option value='31'>达斡尔族</option>

      <option value='32'>仫佬族</option>

      <option value='33'>羌族</option>

      <option value='34'>布朗族</option>

      <option value='35'>撒拉族</option>

      <option value='36'>毛南族</option>

      <option value='37'>仡佬族</option>

      <option value='38'>锡伯族</option>

      <option value='39'>阿昌族</option>

      <option value='40'>普米族</option>

      <option value='41'>塔吉克族</option>

      <option value='42'>怒族</option>

      <option value='43'>乌孜别克族</option>

      <option value='44'>俄罗斯族</option>

      <option value='45'>鄂温克族</option>

      <option value='46'>德昂族</option>

      <option value='47'>保安族</option>

      <option value='48'>裕固族</option>

      <option value='49'>京族</option>

      <option value='50'>塔塔尔族</option>

      <option value='51'>独龙族</option>

      <option value='52'>鄂伦春族</option>

      <option value='53'>赫哲族</option>

      <option value='54'>门巴族</option>

      <option value='55'>珞巴族</option>

      <option value='56'>基诺族</option>

    </select>

</body>

</html>

百度云的分享地址：

链接：https://pan.baidu.com/s/14hu1I_wBD46Jh3axCqFtAw 密码：2eha

select自定义下拉三角符号,css样式小细节的更多相关文章

  1. 隐藏select最右侧的下拉三角图标的css样式

    -webkit-appearance:none; -moz-appearance:none; appearance:none;

  2. select自定义下拉选择图标

    闲言少叙: 上CSS: appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; back ...

  3. jquery美化select，自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

  4. select下拉框option的样式修改

    select原样式: 进行样式修改后的样式: 附上修改代码: //select外面必须包裹一个div,用来覆盖select原有的样式<div class="option"&g ...

  5. 关于safari上的select宽高问题小技，自定义下拉框

    之前一直用windows做开发,最近换了个mac,在几经折腾之下,安装完了各种开发工具,IDE等,然后欣然打开自己正在开发的网站.突然发现mac上所有的下拉框都变了,都是默认样式,无论padding, ...

  6. 使用 CSS overscroll-behavior 控制滚动行为：自定义下拉刷新和溢出效果

    CSS 的新属性 overscroll-behavior 允许开发者覆盖默认的浏览器滚动行为,一般用在滚动到顶部或者底部. 背景 滚动边界和滚动链接(boundary & chaining) ...

  7. easyui源码翻译1.32--Combo(自定义下拉框)

    前言 扩展自$.fn.validatebox.defaults.使用$.fn.combo.defaults重写默认值对象.下载该插件翻译源码 自定义下拉框显示一个可编辑的文本框和下拉面板在html页面 ...

  8. 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头

    一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...

  9. 原生js实现一个自定义下拉单选选择框

    浏览器自带的原生下拉框不太美观,而且各个浏览器表现也不一致,UI一般给的下拉框也是和原生的下拉框差别比较大的,这就需要自己写一个基本功能的下拉菜单/下拉选择框了.最近,把项目中用到的下拉框组件重新封装 ...

随机推荐

  1. 从Windows系统服务获取活动用户的注册表信息（当前活动用户的sessionId. 当前活动用户的 hUserToken）

    首先,对“活动用户”的定义是,当前拥有桌面的用户.对于Windows XP及其以后的系统,即使是可以多个用户同时登录了,拥有桌面的也仅仅只有一个. 如果系统级服务调用Windows API来获取注册表 ...

  2. 零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

    原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器 ...

  3. 关于jquery.fileupload结合PHP上传图片的开发用法流程

    这阵子做了一个项目,涉及到了图片上传,以往用的都是uploadify这个插件,感觉它在PC上的使用还是很强大的, 不过最近这个项目涉及到了移动端的上传,其实uploadify也可以,但是他有一个 up ...

  4. C++/CLI 中使用 ref 和 out

    void fun(int^ % i){} // C# ref void fun([out]int^ % i) {} // C# out

  5. Android 8通过startService引起crash问题

    Android 8.0 不再允许后台service直接通过startService方式去启动,否则就会引起IllegalStateException.解决方式: if (Build.VERSION.S ...

  6. QT5.8 VS2017 编译教程（可以使用VS2017 XP兼容包）

    1.下载QT5.8源码 这个我不做过多解释. 2.安装使用的环境 visual studio 2017  Python Perl  Ruby 安装好,并配置好环境PATH变量. 3.修改错误代码 错误 ...

  7. 如何把zip文件直接解压到内存里？

    解压到硬盘再读进来耽误时间. var  LZip: TZipFile;  LMem: TMemoryStream;  LBytes: TBytes;begin  LZip := TZipFile.Cr ...

  8. 用vs2010编译好的ICU库

    1.ICU库的官网网址为http://site.icu-project.org/ 2.ICU(International Components for Unicode)是一个国际化的字符编码和转化的库 ...

  9. Linux基础(二)

    网卡的启动与关闭 ipup ens33 启动网卡 ifdown 关闭网卡 普通用户没有该权限 root用户,管理员,普通用户的权限 root 至高无上的 root用户所在的组是root组 ​ 管理员 ...

  10. Android native进程间通信实例-binder篇之——HAL层访问JAVA层的服务

    有一天在群里聊天的时候,有人提出一个问题,怎样才能做到HAL层访问JAVA层的接口?刚好我不会,所以做了一点研究. 之前的文章末尾部分说过了service call 可以用来调试系统的binder服务 ...