谷歌、火狐、ie下 select 的默认下拉箭头图标差别还是比较大,一般我们都会清除默认样式,重新设计箭头图标;

/* --ie清除--*/

select::-ms-expand{ display: none; }

/* --火狐、谷歌清除--*/

select{
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("arrow.png") no-repeat scroll right center transparent;
padding-right: 14px;
}
/* --箭头就用自己设计的箭头,padding 空出箭头的位置--*/

option样式的简单清除

option::-ms-expand{ display: none; }
option{
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */
appearance:none;
}
/* --背景色字体颜色--*/
option:hover{
color:#fff;
background-color:#1E90FF;
}

//这些可以简单的解决一些问题,如果要求美观,就用ul,li等写吧,option很多属性样式不好控制;

select默认下拉箭头改变、option样式清除的更多相关文章

  1. select自定义下拉三角符号,css样式小细节

    本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...

  2. select change下拉框改变事件 设置选定项,禁用select

    select change下拉框改变事件 设置选定项,禁用select 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  3. 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头

    一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...

  4. select下拉箭头改变,兼容ie8/9

    各个浏览器下select默认的下拉箭头差别较大,通常会清除默认样式,重新设计 <html> <head> <meta charset="utf-8"& ...

  5. css清除select的下拉箭头样式

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  6. 清除Css中select的下拉箭头样式

    select {/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/appeara ...

  7. 如何修改select标签的默认下拉箭头样式?

    对于一般的项目而言,select标签在浏览器中表现出来的默认样式也不算丑,但是一次项目中,项目经理却要求对select标签本身进行样式修改,美化其下拉小箭头的样式.我思考和尝试了许多方法,最终得到一种 ...

  8. select框默认样式去除(ie中隐藏默认下拉图标)

    html代码 <select class="info-select"> <option selected="selected">1< ...

  9. 将select的默认小三角替换成别的图片,且实现点击图片出现下拉框选择option

    最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...

随机推荐

  1. 软件设计模式之适配器模式(JAVA)

    什么是适配器模式? 在计算机编程中,适配器模式(有时候也称包装样式或者包装)将一个类的接口适配成用户所期待的.适配器能将因为接口不兼容而不能在一起工作的类工作在一起,做法是将类自己的接口包裹在一个已存 ...

  2. 内存管理 初始化(七)kmem_cache_init_late 初始化slab分配器(下)

    我们知道kmem_cache中对于每CPU都有一个array_cache,已作为每CPU申请内存的缓存.  此函数的目的在于:每个kmem_cache都有一个kmem_list3实例,该实例的shar ...

  3. java中字符串太长,怎么自动换到下一行

    直接在中间代码出按回车

  4. CorelDRAW中如何再制对象详解

    再制对象指的是快捷地将对象按一定的方式复制为多个对象,此种复制是复制的复制,再制不仅可以节省复制的时间,再制间距还可以保证复制效果.本教程将详解如何在CorelDRAW软件中再制对象. CorelDR ...

  5. MongoVUE破解

    使用MongoVUE来查看,管理GridFS MongoVUE地址:http://www.mongovue.com/ MongoVUE是个免费软件,但超过15天后功能受限.可以通过删除以下注册表项来解 ...

  6. yum和apt-get用法及区别

    https://www.cnblogs.com/garinzhang/p/diff_between_yum_apt-get_in_linux.html

  7. [Bayesian] “我是bayesian我怕谁”系列 - Naive Bayes with Prior

    先明确一些潜规则: 机器学习是个collection or set of models,一切实践性强的模型都会被归纳到这个领域,没有严格的定义,’有用‘可能就是唯一的共性. 机器学习大概分为三个领域: ...

  8. IOS 基于APNS消息推送原理与实现(JAVA后台)--转

    Push的原理: Push 的工作机制可以简单的概括为下图   图中,Provider是指某个iPhone软件的Push服务器,这篇文章我将使用.net作为Provider. APNS 是Apple ...

  9. Weblogic12 集群部署

    1. 集群配置规划 服务器名称 地址和端口 AdminServer 192.168.15.1:7001 ManagedServer1 192.168.15.1:8001 ManagedServer2 ...

  10. System.exit(0)会跳过finally块的执行

    public class test { public static void main(String[] args) { try { System.exit(0); System.out.printl ...