先来看看效果图：

css：

  1.     <style media="screen">
  2.         .select_demo,
  3.         .select_list {
  4.             width: 400px;
  5.             height: 60px;
  6.         }
  7.  
  8.         .select_demo {
  9.             background-color: #fbe4e8;
  10.         }
  11.  
  12.         .select_list {
  13.             border: solid 2px #96cffd;
  14.             font-size: 30px;
  15.             padding-left: 20px;
  16.             /*很关键：将默认的select选择框样式清除*/
  17.             appearance: none;
  18.             -moz-appearance: none;
  19.             -webkit-appearance: none;
  20.              /*在选择框的最右侧中间显示小箭头图片*/
  21.             background: url("chevron_down.png") no-repeat scroll right center transparent;
  22.             background-position-x: 330px;
  23.         }
  24.  
  25.         /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  26.         select::-ms-expand {
  27.             display: none;
  28.         }
  29.     </style>

html：

  1. <body>
  2.     <div class="select_demo">
  3.         <select class="select_list">
  4.           <option value="0">请选择</option>
  5.           <option value="1">香蕉</option>
  6.           <option value="2">火龙果</option>
  7.           <option value="3">圣女果</option>
  8.           <option value="4">南非无籽红提</option>
  9.           <option value="5">菲律宾帝皇蕉</option>
  10.       </select>
  11.     </div>
  12. </body>

右侧图标：

也可以自己在：图标  上选择自己喜欢的图标。

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

  1. css修改滚动条默认样式

    之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...

  2. 修改select默认样式

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

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

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

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

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

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

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

  6. css清除浏览器默认样式

    css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/ ...

  7. 弹窗中修改select默认值遇到的问题

    弹窗中修改select默认值无效 前提: 项目中遇到一个需求, 在一个弹窗中,有很多个select都是在打开弹窗的同时由js自动生成的(每次打开都自动重新生成一遍). 弹窗打开后,从每个select的 ...

  8. css修改placeholder的样式

    css修改placeholder的样式 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: ...

  9. 取消select默认样式

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

随机推荐

  1. 全新WayOS 配置文件保存工具支持蓝色界面路由版本

    一直以来都有群里的朋友要求我弄一个支持蓝色界面路由的参数备份工具,也一直拖了大半年 昨天忙到4点多,早上又因为一些小的BUG被用户电话叫起,干脆就帮你们整一个这个工具了 功能还是一样,支持各种参数的保 ...

  2. Vue中计算属性与class,style绑定

    var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...

  3. 【WP8】LoopingSelector

    WP8的WindowsPhoneToolkit工具包中有一个 LoopingSelector 可以想选择日期或时间一样进行选择 1.首先当然是引用WindowsPhoneToolkit 在Nuget控 ...

  4. keynote代码高亮【转】

    码农即使做ppt,也离不开代码,在keynote下,如果要粘贴代码,如何做到语法高亮呢? 补充1,该功能由pygments提供支持,所以支持的语言见:http://pygments.org/langu ...

  5. Linux 系统磁盘满处理方法

    1.使用find命令,找出占用空间较大的文件 find / -type f -size +5G   —找到大于5G的文件,有work权限的情况下可以使用 find . -type f -size +1 ...

  6. 在eclipse中查看sources源码和JavaDoc帮助文档

    今天学习Netty的过程中,从官网下载的netty里面的内容如下: 其中jar文件夹里面的内容如下: 可以看到每一个具体的jar包就对应有一个sources.jar包,然后所有的帮助文档在javaDo ...

  7. 近5年常考Java面试题及答案整理（一）

    下列面试题都是在网上收集的,本人抱着学习的态度找了下参考答案,有不足的地方还请指正. 1.面向对象的特征有哪些方面? 抽象:将同类对象的共同特征提取出来构造类. 继承:基于基类创建新类. 封装:将数据 ...

  8. Java程序员的IntelliJ IDEA使用教程

    前言 博主是Java程序员,以前一直都用myeclipse来开发的,说实话感觉myeclipse毫无美感可言,后来经过同事介绍,认识了IDEA,一眼就相中了IDEA黑色的主题风格,自此就抛弃了旧爱my ...

  9. 1 salt执行模块开发

    saltstack自带的模块已经很多了,但是有些时候我们需要自己开发出自己的模块来满足自己的需求,那就要自己开发了,下面请看例子 创建_modules目录在file_roots下面 我们需要在file ...

  10. 适用于Win8的Office2003_SP3精简版集成各类补丁+兼容包

    适用于Win8的Office2003_SP3精简版集成各类补丁+兼容包软件名称: Office 软件版本: Office2003_SP3 软件大小: 104M 软件语言: 简体中文 软件授权: 破解 ...