先来看看效果图：

css：

    <style media="screen">

        .select_demo,

        .select_list {

            width: 400px;

            height: 60px;

        }

        .select_demo {

            background-color: #fbe4e8;

        }

        .select_list {

            border: solid 2px #96cffd;

            font-size: 30px;

            padding-left: 20px;

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

            appearance: none;

            -moz-appearance: none;

            -webkit-appearance: none;

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

            background: url("chevron_down.png") no-repeat scroll right center transparent;

            background-position-x: 330px;

        }

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

        select::-ms-expand {

            display: none;

        }

    </style>

html：

<body>

    <div class="select_demo">

        <select class="select_list">

          <option value="0">请选择</option>

          <option value="1">香蕉</option>

          <option value="2">火龙果</option>

          <option value="3">圣女果</option>

          <option value="4">南非无籽红提</option>

          <option value="5">菲律宾帝皇蕉</option>

      </select>

    </div>

</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. log4net 日志配置及使用

    一.log4net按照不同的[LEVEL]级别输出到不同文件 <log4net> <!--错误日志:::记录错误日志--> <!--按日期分割日志文件 一天一个--> ...

  2. SAX解析XML笔记

    关于基本操作,请参考:Java用SAX解析XML,这里不重复造轮子了,以下是个人笔记:

  3. 百度编辑器插入视频、iframe 失败

    插入失败是因为编辑器的xssFilter过滤,导致插入出现异常 文件位置:ueditor.config.js ,大概在428行加上 video: ['autoplay', 'controls', 'l ...

  4. VC获得本机网络连接状态

    /本机网络连接类型(成功) #define  NET_TYPE_RAS_DIAL_UP_CONNECT_NET           0x01    //上网类型:采用RAS拨号连接上网    0x01 ...

  5. MVC學習網站

    http://www.cnblogs.com/haogj/archive/2011/11/23/2246032.html

  6. VS或编译的时候不生成Release文件夹

    今天在编译第三方类的时候,总是发布的时候报没有第三方类库的的Release版本 解决方案: Build=>Configuration Manager=>Release 编译=>配置管 ...

  7. matplotlib使用GridSpec调整子图位置大小 （非对称的子图）

    用matplotlib.pyplot的subplots命令可以很方便的画对称的子图,但是如果要画非对称的子图(如下)就需要用GridSpec命令来控制子图的位置和大小: 而上图的结构可以用一下两种方式 ...

  8. linux环境中通过useradd命令,创建用户的时候指定用户的base-dir

    需求说明: 今天一个同事,问了一个这样的问题,在linux环境中,创建用户的时候,默认的是在/home目录下创建一个与用户名相同的家目录, 如何能够将这个/home更换成一个其他的,比如/opt/ap ...

  9. openURL调用其他程序(转)

    转自:http://blog.csdn.net/iefreer/article/details/8812708 一个应用程序,可以调用其它的应用程序的. 和其它应用程序进行通讯如果一个应用程序支持一些 ...

  10. Missing iOS Distribution signing identity

    打包上传appstore的时候报错如下: 解决方法: Download https://developer.apple.com/certificationauthority/AppleWWDRCA.c ...