把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. Linux 历史信息history显示执行时间

    fc命令 fc命令自动掉用vi编辑器修改已有历史命令,当保存时立即执行修改后的命令,也可以用来显示历史命令.fc命令编辑历史命令时,会自动调用vi编辑器.fc保存文件后,会自动执行所编辑过的命令. 测 ...

  2. x == (x = y) 不等于 (x = y) == x ？

    简评:不瞒你说,我现在数数都是从 0 开始数的,整数是 1024. 有这么一个 Java 程序: class Quirky { public static void main(String[] arg ...

  3. 本机号码认证黑科技：极光（JG）开发者服务推出“极光认证”新产品

    近日,中国领先的大数据服务商极光(JG)推出全新产品--极光认证JVerification.极光认证是极光针对APP用户注册登陆,二次安全验证等身份验证场景打造的一款本机号码认证SDK,验证用户提供的 ...

  4. php脚本cli 模式运行

    参考文章 http://rapheal.sinaapp.com/2013/11/20/php_zend_hello_world/ http://www.douban.com/note/33788568 ...

  5. Java_多线程2_线程池

    线程池(pool): 线程池的作用: 1.节省资源,减少线程的数量和创建销毁线程的开销2.合理的管理线程的分配 线程池的创建: 1.newCachedThreadPool //优点:很灵活,弹性的线程 ...

  6. POJ 2215

    //package j; import java.util.*; public class Main { public static void main(String args[]){ int r; ...

  7. panda的query过滤

    pandas中可以用query函数以类SQL语言执行查询.

  8. NPOI设置水平、垂直居中

    C#语法: string fs = "@report.xls";//文件路径 FileStream excelPath = File.Open(@fs, FileMode.Open ...

  9. hdu-1277--字典树坑题

    hdu-1227 字典树,坑题!!当字典树练手 Problem Description 我们大家经常用google检索信息,但是检索信息的程序是很困难编写的:现在请你编写一个简单的全文检索程序. 问题 ...

  10. This operation is not available unless admin mode is enabled: FLUSHDB

    报错:  This operation is not available unless admin mode is enabled: FLUSHDB 参考内容: https://www.cnblogs ...