自定义select 小三角
把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 小三角的更多相关文章
- select自定义小三角样式
这段代码是网上大部分的解决办法,在这里总结一下: 让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果. <div class ...
- 如何把select默认的小三角替换成自己的图片
不同的浏览器默认的select的选项图标是不同的,例如: 在chrome中,是这样的: 未点击时 点击时 在Firefox中是这样的: 未点击时 点击时 在IE9中是这样的: 未点击时 ...
- 去除html页面中按钮在ios中的默认样式,去除select自带的小三角图标
btn{-webkit-appearance: none;} -webkit-appearance: none也能去掉select下拉列表后面自带的小三角
- 将select的默认小三角替换成别的图片,且实现点击图片出现下拉框选择option
最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...
- jquery插件-自定义select
由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦.最好的办法就是使用自定义样式仿select效果.这里写了一个 ...
- Win7里面如何把这一堆图标放进那个右下角的小三角框框
Win7里面如何把这一堆图标放进那个右下角的小三角框框.. Win7里面如何把这一堆图标放进那个小框框:1.在任务栏空白处右击,点击属性:2.在属性中的通知区域-->点击自定义按钮:3.去除勾选 ...
- 一个常见下拉菜单的样式:一体化小三角(纯css手写解决)
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
- CSS实现小三角小技巧
<style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...
- css实现小三角(原理)
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
随机推荐
- XCode7无证书真机调试教程
转载自http://altair21.com/156.html 前提条件: XCode版本>=7 1. 进入xcode,菜单栏选择xcode –> preferences (快捷键 com ...
- MySQL , MHA , Haproxy 配置
1. 基本架构 2. 读端口影射 3. 写端口影射 进行一个Health Check MHA Manager对Master节点MySQL 进行存活监控 读FailOver 1 读FailOver 2 ...
- 第一站:CLion安装教程与环境配置
原文来自:http://www.sunmey.cn/thread-129-1-1.html 本人:找了很久才找到的CLion安装教程与环境配置,这里分享给大家~ 这里要说明的一点是CLion是要钱的, ...
- ArrayList分析
ArrayList概述 ArrayList继承了AbstractList,实现了List接口,底层基于动态数组,容量大小可以动态变化,ArrayList中可以添加null元素,另外,ArrayList ...
- [BJOI2014]大融合(LCT)
题面 luogu bzoj是权限题.. 题解 \(LCT\)维护子树信息 因为\(LCT\)中有一些虚子树,\(splay\)维护不了. 所以要新开一个数组来记录 然后注意\(link\)时 是先\( ...
- Mac 10.12安装网站圆形设计工具Axure RP Pro 7
下载: (链接: https://pan.baidu.com/s/1hsaTafi 密码: 855y)
- typescript 入门
为什么要使用typescript? 出现拼写错误,可以立即指出错误. 出现模块引入错误,立即指出错误. 出现函数.变量类型错误,立即指出错误. 在react组件中制定好了基本的props和state之 ...
- javascript中的抽象相等==与严格相等===
1.数据类型:String,Number,Boolean,Object,Null,Undefined 2.抽象相等:x==y A.两者数据类型相同:typeof x == typeof y a.Str ...
- windows7用WMware安装Linux虚拟机详细步骤
一.安装环境 windows7操作系统物理机VMware Workstation 软件(可以在网上下载)CentOS6.5镜像文件(其他版本都大同小异,这里以CentOS6.5为例)Cnetos6.5 ...
- 一次java导出pdf的经历
近期由于工作需要,需要将html代码导入到pdf中,经过了几种pdf的方案对比后发现IText是最简单和便捷的一种方式,于是乎采用了Itext. PDF生成 第一步:导入Maven依赖 <!-- ...