把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. centos和ubuntu配置路由的三种方式

    本篇总结三种修改路由的方式:route, ip route, 以及通过修改文件来配置路由,前2种命令行形式适用于ubuntu和centos,重启失效,最后一种永久有效.     一. route命令 ...

  2. Spring 并发事务的探究

    前言 在目前的软件架构中,不仅存在单独的数据库操作(一条SQL以内,还存在逻辑性的一组操作.而互联网软件系统最少不了的就是对共享资源的操作.比如热闹的集市,抢购的人群对同见商品的抢购由一位售货员来处理 ...

  3. Linux(Ubuntu)新建用户只有一个$问题

    参考自: http://www.cnblogs.com/ylan2009/articles/2321177.html 1.用root登录操作 2.查看/etc/passwd文件中新建用户的权限 有没有 ...

  4. EDEM 2018 + Fluent 19.0耦合

    具体步骤参考流沙的文章即可,如果python版本较高,可能有个地方需要小小的改动一下: tools文件夹下的compile_lib_edem_coupling.py文件中,导入模块有个地方需要修改 其 ...

  5. 博客主题皮肤探索-添加新功能和fiddler的css/js替换

    还有前言 使用了主题之后,发现还差了一点功能.最新评论没有了,导致读者回复需要一点时间去找到底回复了哪条博客.于是就有了添加功能的想法. 如何调试CSS/JS 打开f12,可以看见加载的js资源都是混 ...

  6. 三、OPENERP 中的对象关系类型

    OE中的对象关系一共分四种,one2one,one2many,many2one,many2many.他们的意思分别是一对一,一对多,多对一以及多对多. 我们新建一个模块来测试这四种类型 1.one2o ...

  7. Mac 10.12安装Office 2011

    说明:由于WPS没有Mac版的,所以只能装这个,这个版本是2011的,基本够用了. 下载: (链接: https://pan.baidu.com/s/1pKGvXBP 密码: irw9)

  8. 在linux上一行代码不用写实现自动采集+hadoop分词

    在linux上一行代码不用写实现自动采集+hadoop分词 将下面的shell脚本保存成到xxx.sh,然后执行即可 cd /opt/hadoop mkdir spider wget -O spide ...

  9. 【Druid】access denied for user ''@'ip'

    今天在写单元测试时,遇到一个很奇葩的问题,一直在报这样的错误: Caused by: java.sql.SQLException: Access denied for user ''@'183.134 ...

  10. 21.Decorator修饰器

    1.类的修饰 2.方法的修饰 3.为什么修饰器不能用于函数? 4.core-decorators.js 5.使用修饰器实现自动发布事件 6.Mixin 7.Trait 8.Babel转码器的支持