先来看看效果图：

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. HTTP常见的Post请求

    零.HTTP协议是什么样的?  HTTP的请求报文分为三部分:请求行.请求头.请求体 如下2张图表示的意思一致: 图一 图二  本文章的重点是请求体(请求数据),请求行和请求头的部分请参考: http ...

  2. Enhance基本例子

    太晚了,有些东西没有补充,回头再补上. 先上Demo 1.要执行的方法 package enhancerTest; /** * Created by LiuSuSu on 2017/3/26. */ ...

  3. PHP 开发者该知道的 5 个 Composer 小技巧

    From: https://segmentfault.com/a/1190000000355928 Composer是新一代的PHP依赖管理工具.其介绍和基本用法可以看这篇<Composer P ...

  4. struts实现国际化

    上篇博客学习了Java国际化的一些基础知识,了解了这些知识之后,我们可以更好的过度到struts国际化. 本篇博客主要学习struts国际化的实现: 1.配置环境设置baseName. 在struts ...

  5. iOS模拟(糟糕的)网络环境

    有时候为了模拟在糟糕的网络环境下app的表现,会故意拔网线(断wifi),苹果其实提供了专门的工具来精确地模拟你在几个预设的场景下的网络连接情况:Network Link Conditioner 点击 ...

  6. 5 云计算系列之glance镜像服务安装

    preface 在上节中我们了解了keystone服务,下面就看看glance管理镜像的服务吧. glance组成 glance有两部分组成: glance-api 接受云系统镜像的创建,删除,读取请 ...

  7. JS_SINA股票接口

    深成指: <script type="text/javascript" src="http://hq.sinajs.cn/list=sz399001" c ...

  8. Unity Shader-描边效果

    原文链接:http://blog.csdn.net/puppet_master

  9. 消息中间件的意义和应用场景 （activeMq）

    消息中间件一般两个功能,解耦和异步处理,分别举个例子吧 解耦合:比如我们做一个微博产品中的好友系统,就很需要使用消息中间件当我们添加一个关注的时候, 涉及以下几个子系统 推荐系统,需要根据你关注的人给 ...

  10. Centos7.3.1611安装mysql5.7.18 rpm教程 并设置datadir

    一.卸载MariaDB CentOS7默认安装MariaDB而不是MySQL,而且yum服务器上也移除了mysql相关的软件包.因为MariaDB和MySQL可能会冲突,故先卸载MariaDB. 1. ...