把select小三角换成自己的图片

效果：

css样式：

<style>

        #my_select {

            display: flex;

            display: -webkit-flex;

            width: 120px;

            font-size: 24px;

            padding: 0 5px;

            margin: 20px auto;

            outline: none;

            border: 1px solid #00DD00;

            appearance: none;

            /* 兼容Chrome */

            -webkit-appearance: none;

            background: url(Images/xia.png) no-repeat right center;

            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

            color: #FF5511;

        }

    </style>

HTML：

<body>

    <select name="" id="my_select">

        <option value="0">苹果</option>

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

        <option value="2">橘子</option>

    </select>

</body>

　　

自定义select 小三角的更多相关文章

  1. select自定义小三角样式

    这段代码是网上大部分的解决办法,在这里总结一下: 让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果. <div class ...

  2. 如何把select默认的小三角替换成自己的图片

    不同的浏览器默认的select的选项图标是不同的,例如: 在chrome中,是这样的: 未点击时    点击时  在Firefox中是这样的: 未点击时  点击时   在IE9中是这样的: 未点击时  ...

  3. 去除html页面中按钮在ios中的默认样式，去除select自带的小三角图标

    btn{-webkit-appearance: none;} -webkit-appearance: none也能去掉select下拉列表后面自带的小三角

  4. 将select的默认小三角替换成别的图片，且实现点击图片出现下拉框选择option

    最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...

  5. jquery插件-自定义select

        由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦.最好的办法就是使用自定义样式仿select效果.这里写了一个 ...

  6. Win7里面如何把这一堆图标放进那个右下角的小三角框框

    Win7里面如何把这一堆图标放进那个右下角的小三角框框.. Win7里面如何把这一堆图标放进那个小框框:1.在任务栏空白处右击,点击属性:2.在属性中的通知区域-->点击自定义按钮:3.去除勾选 ...

  7. 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  8. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  9. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

随机推荐

  1. git配置教程

    一.配置ssh 1.检查本机是否有ssh key设置 如果没有则提示: No such file or directory 如果有则进入~/.ssh路径下(ls查看当前路径文件,rm删除所有文件) 2 ...

  2. Django中的Cookie--实现登录

    Django中的Cookie--实现登录 Django Cookie  Cookie Cookie 是什么 保存在浏览器端的键值对,让服务器提取有用的信息. 为什么要有 Cookie 因为HTTP请求 ...

  3. BZOJ - 2500 树形DP乱搞

    题意:给出一棵树,两个给给的人在第\(i\)天会从节点\(i\)沿着最长路径走,求最长的连续天数\([L,R]\)使得\([L,R]\)为起点的最长路径极差不超过m 求\(1\)到\(n\)的最长路经 ...

  4. h5 html5 模拟时钟 页面

    <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...

  5. Iviews视频搜索引擎

    随着视频类型的增加和数据量的日益庞大,如何有效地组织和管理这些数据,使人们能够方便地从大量视频数据中找到自己感兴趣的相关视频片段已成为一种迫切的需求,而能够满足这一需求的技术便是目前人们普遍关注的基于 ...

  6. excel 快速填充所有非连续空白单元格

    工作中经常会碰到这样的表,需要把空白的单元格填充完成.变成后图.下面就是方法.       工具/原料 EXCEL 方法/步骤   首先选中你要填充的区域,   按“F5"或者 Ctrl + ...

  7. 使用NHibernate（4）--拦截器和事件

    如果想在一个事务的开始.执行中.完成后等过程中执行一些自己的逻辑(比如记录日志.查看sql),拦截器(Interceptors)和事件(Event)就可以发挥作用了.两者所能完成的功能差不多. 1,拦 ...

  8. SQL LIKE 通配符随笔

    通配符 说明 _    与任意单字符匹配 %    与包含一个或多个字符的字符串匹配 [ ]  与特定范围(例如,[a-f])或特定集(例如,[abcdef])中的任意单字符匹配. [^]  与特定范 ...

  9. Java多线程（三）锁对象和线程池

    1:锁(Lock) 1.1       java提供了一个锁的接口,这个锁同样可以达到同步代码块的功能,API文档上说使用锁比使用synchronized更加灵活. 1.2       如何使用这个“ ...

  10. tomcat监控工具probe

    probe官网:http://www.lambdaprobe.org/ 但是已经链接至github了:https://github.com/psi-probe/psi-probe 下载psi-prob ...