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

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

然后自己分享处理吧。

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>select 右边下拉箭头 demo ... 简单的56个民族</title>
  6.     <style type="text/css">
  7.         select {
  8.           /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  9.           border: solid 1px red;
  10.           /*很关键：将默认的select选择框样式清除*/
  11.           appearance:none;
  12.           -moz-appearance:none;
  13.           -webkit-appearance:none;
  14.           /*在选择框的最右侧中间显示小箭头图片*/
  15.           /*background: url("./arrow.jpg") no-repeat scroll right center transparent;*/
  16.           /*background: url("./arrow.jpg") no-repeat scroll 170px 15px transparent;*/
  17.           /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  18.           padding-right: 35px;
  19.           padding-left:  4px;
  20.           border-radius: 4px;
  21.         }
  22.         /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  23.         select::-ms-expand { display: none; }
  24.  
  25.         .test{
  26.             width:200px;
  27.             height:40px;
  28.             background: url("./arrow.jpg") no-repeat scroll 170px 15px transparent;
  29.             /*padding-right:20px;*/
  30.         }
  31.         .test option{
  32.             height:30px;
  33.             width: 200px;
  34.             padding-left:5px;
  35.  
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <select class="test">
  41.       <option value='1'>汉族</option>
  42.       <option value='2'>蒙古族</option>
  43.       <option value='3'>回族</option>
  44.       <option value='4'>藏族</option>
  45.       <option value='5'>维吾尔族</option>
  46.       <option value='6'>苗族</option>
  47.       <option value='7'>彝族</option>
  48.       <option value='8'>壮族</option>
  49.       <option value='9'>布依族</option>
  50.       <option value='10'>朝鲜族</option>
  51.       <option value='11'>满族</option>
  52.       <option value='12'>侗族</option>
  53.       <option value='13'>瑶族</option>
  54.       <option value='14'>白族</option>
  55.       <option value='15'>土家族</option>
  56.       <option value='16'>哈尼族</option>
  57.       <option value='17'>哈萨克族</option>
  58.       <option value='18'>傣族</option>
  59.       <option value='19'>黎族</option>
  60.       <option value='20'>傈僳族</option>
  61.       <option value='21'>佤族</option>
  62.       <option value='22'>畲族</option>
  63.       <option value='23'>高山族</option>
  64.       <option value='24'>拉祜族</option>
  65.       <option value='25'>水族</option>
  66.       <option value='26'>东乡族</option>
  67.       <option value='27'>纳西族</option>
  68.       <option value='28'>景颇族</option>
  69.       <option value='29'>柯尔克孜族</option>
  70.       <option value='30'>土族</option>
  71.       <option value='31'>达斡尔族</option>
  72.       <option value='32'>仫佬族</option>
  73.       <option value='33'>羌族</option>
  74.       <option value='34'>布朗族</option>
  75.       <option value='35'>撒拉族</option>
  76.       <option value='36'>毛南族</option>
  77.       <option value='37'>仡佬族</option>
  78.       <option value='38'>锡伯族</option>
  79.       <option value='39'>阿昌族</option>
  80.       <option value='40'>普米族</option>
  81.       <option value='41'>塔吉克族</option>
  82.       <option value='42'>怒族</option>
  83.       <option value='43'>乌孜别克族</option>
  84.       <option value='44'>俄罗斯族</option>
  85.       <option value='45'>鄂温克族</option>
  86.       <option value='46'>德昂族</option>
  87.       <option value='47'>保安族</option>
  88.       <option value='48'>裕固族</option>
  89.       <option value='49'>京族</option>
  90.       <option value='50'>塔塔尔族</option>
  91.       <option value='51'>独龙族</option>
  92.       <option value='52'>鄂伦春族</option>
  93.       <option value='53'>赫哲族</option>
  94.       <option value='54'>门巴族</option>
  95.       <option value='55'>珞巴族</option>
  96.       <option value='56'>基诺族</option>
  97.     </select>
  98. </body>
  99. </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. DB First EF中的存储过程、函数、视图

    视图约等于表(属性)存储过程变为方法,方法中调用存储过程 EF可以调用存储过程,DB First的流程是刷新模型,获取存储过程,调用参考:http://blog.csdn.net/sudazf/art ...

  2. WPF依赖项属性不需要包装属性也可以工作

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  3. SICP 1.29-1.33

    1.29 (define (sum term a next b) (if (> a b) (+ (term a) (sum term (next a) next b)))) (define (c ...

  4. Win10 如何以管理员身份设置开机自启程序(2)

    原文:Win10 如何以管理员身份设置开机自启程序(2) 自己水平太菜,对Windows的权限问题一直不是特别了解.之前在<Win10 如何以管理员身份设置开机自启程序(1)>一文中介绍了 ...

  5. Keil5生成bin文件

    进入“Options for Target”设置界面如下: 如图所示方框中输入: fromelf.exe --bin -o "$L@L.bin" "#L" 生成 ...

  6. Xcode自动注释插件: VVDocumenter使用和安装

    开源插件: VVDocumenter 下载地址: https://github.com/onevcat/VVDocumenter-Xcode 使用效果: 使用方法: 在方法写///,效果同上图,下面有 ...

  7. 拆分Codeigniter 数据库，独立提取

    起因:     codeigniter的activeRecord链式操作非常的方便,目前手头的项目用的不是CI,但是又想使用CI的数据库操作.   1. 新建文件夹 activeDB,内部目录如下 最 ...

  8. Linux ADF(Atomic Display Framework)浅析---概述

    概述 因为工作关系,最近有涉及到ADF(Atomic Display Framework)相关的内容,部分内容来自互联网 ADF(Atomic Display Framework)是Google新增的 ...

  9. 深入探索ScrollWindow

    最近做WIN32 API开发时发现对ScrollWindow的一些工作原理并不是太清楚,于是做了相关研究,记载下来和大家共同学习. 首先在WM_CREATE中获取系统字符的宽度和高度 case WM_ ...

  10. Google C++测试框架系列高级篇：第二章 让GTest学习打印自定义对象

    上一篇:更多关于断言的知识 原始链接:Teaching Google Test How to Print Your Values 词汇表 版本号:v_0.1 让GTest学习打印自定义对象 当一个断言 ...