先来看看效果图：

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. T4生成多文件时,不生成自己

    如:我用的网上的生成多文件的一个include文件. 生成多文件时,默认会生成一个以自己名字命名的文件如: 有一个demo.tt文件,生成时会出来一个demo.cs文件(默认情况下) 解决方法: Fo ...

  2. PowerDesigner使用技巧（转载）

    1.如何打开PowerDesigner 快捷工具栏 paletteTools(工具栏)--> customsize toolbars(自定义工具栏)-->勾选 palette(调色板) 2 ...

  3. protected: C++ access control works on per-class basis, not on per-object basis

    一个很简单的问题: //为什么BASE::foo()中可以直接通过p访问val? 看本记录标题,这个问题困扰了很长一段时间,终于解决class BASE {      private:        ...

  4. PHP对HTML代码尸体编码2个函数

    1.htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体. 2.htmlentities() 函数把字符转换为 HTML 实体. 记录下

  5. windows下WAMP php5.x redis扩展

    其解压到php的扩展目录ext下,在php.ini文件中扩展部分增加一行:extension=php_redis.dll 新增下载地下: php5.3 http://download.csdn.net ...

  6. Linux静态库生成

    Linux上的静态库,其实是目标文件的归档文件. 在Linux上创建静态库的步骤如下: 写源文件,通过 gcc -c xxx.c 生成目标文件. 用 ar 归档目标文件,生成静态库. 配合静态库,写一 ...

  7. Xcode文件被锁定：The file ".xcodeproj" could not be unlocked

    同事从svn上面checkout项目到本地,通过xcode打开的时候提示的这个问题. The file "xcodeproj" could not be unlocked. Cou ...

  8. java序列化/反序列化之xstream、protobuf、protostuff 的比较与使用例子

    目录 背景 测试 环境 工具 说明 结果 结论 xstream简单教程 准备 代码 protobuf简单教程 快速入门 下载.exe编译器 编写.proto文件 利用编译器编译.proto文件生成ja ...

  9. SpringMVC由浅入深day01_7入门程序小结

    7 入门程序小结 通过入门程序理解springmvc前端控制器.处理器映射器.处理器适配器.视图解析器用法. 前端控制器配置: 处理器映射器: 非注解处理器映射器(了解) 注解的处理器映射器(掌握) ...

  10. 基于github+hexo搭建个人博客（window）

    0x01 环境搭建 1.Node.js环境 下载Node.js安装文件:https://nodejs.org/en/download/ 根据系统选择相应安装包下载,安装过程一路Next,默认设置即可. ...