把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. day03 --class --homework

    '''# >>>>>>2 :,有字符串s = "123a4b5c"#>>>>>^ 1: # 1)通过对s切片形成新 ...

  2. hibernate与Oracle

    今天在用hibernate连接Oracle数据库进行查询时,出现一点小状况 数据库中是有数据的,而且程序本身也没有问题,可就是查不出数据,在经过几个小时的查找下,中遇找到了问题所在,那就是我Oracl ...

  3. leetcode-201-数字范围按位与

    题目描述: 给定范围 [m, n],其中 0 <= m <= n <= 2147483647,返回此范围内所有数字的按位与(包含 m, n 两端点). 示例 1: 输入: [5,7] ...

  4. Linux服务器核心参数配置

    使用Linux作为长连接的web服务器时,为了增加服务的容量,以及处理性能,需要修改一些参数. 一.多进程绑定CPU 1.使用taskset命令可以绑定进程到指定CPU,以减少多核CPU环境中,单进程 ...

  5. jinja url_for js 参数

    在JavaScript中,也就是客户端,向flask路由服务器端使用post请求并在url_for中传递参数,服务器端获取不到该参数, Jinja不能使用Javascript变量,如下所示: var ...

  6. Q72 编辑距离

    给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 . 你可以对一个单词进行如下三种操作: 插入一个字符 删除一个字符 替换一个字符 示例 1: 输 ...

  7. spring boot快速入门 9: 单元测试

    进行单元测试: service第一种方式: 第一步:在指定service中创建一个方法进行测试 /** * 通过ID查询一个女生的信息 * @param id * @return */ public ...

  8. WCF系列教程之WCF客户端调用服务

    1.创建WCF客户端应用程序需要执行下列步骤 (1).获取服务终结点的服务协定.绑定以及地址信息 (2).使用该信息创建WCF客户端 (3).调用操作 (4).关闭WCF客户端对象 二.操作实例 1. ...

  9. C 扩展库 - sqlite3 API CRUD

    CRUD struct student typedef struct STUDENT { unsigned int id; unsigned char name[16]; unsigned int a ...

  10. Python制作回合制手游外挂简单教程（中）

    接着上篇的博文,今天我们讲如何实现自动组队刷道 引入: 自动组队刷道的流程是先点击刷道按钮.再点击前往按钮.再点击便捷组队······ 这些操作上篇博文已经告诉我们怎么做了,利用picpick丈量坐标 ...