把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 7 Apache服务的安装与配置（转）

    https://blog.51cto.com/13525470/2070375 一.Apache简介 Apache 是一个知名的开源Web服务器.早期的Apache服务器由Apache Group来维 ...

  2. mxonline实战17，上线部署

    在线演示: http://47.244.22.82 python3+django2.0的环境 需要安装的库pip install django-simple-captcha django-pure-p ...

  3. 前端IDE：VSCode + WebStorm

    VSCode 插件安装 官网:Extensions for the Visual Studio family of products: (1)拼接下载链接: https://${publisher}. ...

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

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

  5. Linux文件索引节点相关概念

    一.  概念 1.  inode(index node)表中包含文件系统所有文件列表 一个节点 (索引节点)是在一个表项,包含有关文件的信息( 元数据 ),包括: 文件类型,权限,UID,GID 链接 ...

  6. 【CF1157F】Maximum Balanced Circle 求一个相邻元素之间绝对值为小于1的最大环

    题目: https://codeforces.com/contest/1157/problem/F 给出一个序列 , 我们要从序列里面挑出一些数构造成一个相邻元素之间绝对值为小于1的最大环 , 挑选的 ...

  7. ES6 三层for循环的链式写法

    假设有一个很复杂的数据,并且数据嵌套层数很多.如何避免用三层for循环呢? 有以下梨子,我们需要找到val值为12的,这个对象? 'use strict' let groups = [{ conten ...

  8. 搜索引擎原理和SEO

    搜索引擎原理 通常是指收集了万维网上几千万到十几亿网页病对网页的每个词(即关键词)进行索引,建立搜索引擎数据库的全文搜索引擎. 当用户每次查询某个关键词的时候,所有在页面内容包含了该关键词的网页都作为 ...

  9. ajax防止表单自动提交

    重写表单的checkForm方法,并用if和else解决异步判断的问题. function checkForm(){ 1 var flag = false; $.ajaxSetup({async : ...

  10. Javac的命令

    关于命令,还可以查看<Java 7程序设计>一书后面的附录A As per javac source docs, there are 4 kinds of options: standar ...