select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000;

/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll 95% 55% #fff;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 14px;
padding-left:10px;
}
/*清除ie的默认选择框样式清除,隐藏下拉箭头*/
select::-ms-expand { display: none; }

清除select自带小三角的更多相关文章

  1. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

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

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

  3. 如何把select默认的小三角替换成自己的图片

    不同的浏览器默认的select的选项图标是不同的,例如: 在chrome中,是这样的: 未点击时    点击时  在Firefox中是这样的: 未点击时  点击时   在IE9中是这样的: 未点击时  ...

  4. 【小技巧】只用css实现带小三角的对话框样式

    一个小小的技巧: 如图所示,这种小三角,不用图片,只用css怎么实现呢? 直接上代码吧: <!DOCTYPE html> <html> <head> <tit ...

  5. 自己修改select的样式(修改select右边的小三角)

    CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ ...

  6. 去除html页面中按钮在ios中的默认样式,去除select自带的小三角图标

    btn{-webkit-appearance: none;} -webkit-appearance: none也能去掉select下拉列表后面自带的小三角

  7. select自定义小三角样式

    这段代码是网上大部分的解决办法,在这里总结一下: 让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果. <div class ...

  8. 自定义select 小三角

    把select小三角换成自己的图片 效果: css样式: <style> #my_select { display: flex; display: -webkit-flex; width: ...

  9. 用CSS3实现带小三角形的div框(不用图片)

    现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...

随机推荐

  1. 程序编写安全代码——sendto和recvfrom的大坑

    近日帮一个兄弟查代码问题,再处理完一系列问题以后,发现程序某些时候工作还是不正常,甚至会崩溃.因为环境所限,不能使用gdb,所以我只能review他的代码.最终发现原来是sendto和recvfrom ...

  2. Android SDK更新失败的解决方案(原创)

    笔者在搭建好Android环境后,进行Android的SDK更新下载升级,乌龟的速度,更让人生气的是到了85%的进度时,直接timeout,循环3次无果.查阅相关资料,原来是Google的服务器遭遇了 ...

  3. c++string 输入换行符

    string 一次只能输入一行,不含换行符.可以自己添加换行符 和输入行数.例如:#include <iostream>#include <string>using names ...

  4. 细谈SetButtonInfo函数及其用途

    SetButtonInfo用于设置某个按钮,它的接口定义如下: 下面是它的几个接口函数说明: void CToolBar::SetButtonInfo(int nIndex, UINT nID, UI ...

  5. activemq的安装使用

    近期有项目中用到消息队列,JMS规范中实现最好的开源框架就是activemq.所以选择它(当然这是我老大决定的,像我这样的刚入职场的小菜鸟考虑问题还不太全面)作为消息队列数据传输.公司有有成型的消息队 ...

  6. python day - 17 面向对象的 类空间 和 组合

    1. 类命名空间 在类的代码中,当python 解释器在 运行的那一刻.就会在内存中开辟一个类空间,在类的空间中会加载静态变量,以及类方法的内存地址. 当类名+()(也就是实例化过程中),内存中会再次 ...

  7. springboot和redis处理页面缓存

    页面缓存是应对高并发的一个比较常见的方案,当请求页面的时候,会先查询redis缓存中是否存在,若存在则直接从缓存中返回页面,否则会通过代码逻辑去渲染页面,并将渲染后的页面缓存到redis中,然后返回. ...

  8. Spring Boot 整合 Listener

    两种方法: 方法一: 使用注解 编写Listener,并使用@WebListener注解标记,在启动类使用注解:@ServletComponentScan package clc.user.liste ...

  9. hdu 3336 Count the string(next数组)

    题意:统计前缀在串中出现的次数 思路:next数组,递推 #include<iostream> #include<stdio.h> #include<string.h&g ...

  10. hdu-5718 Oracle(水题)

    题目链接: Oracle Time Limit: 8000/4000 MS (Java/Others)     Memory Limit: 262144/262144 K (Java/Others) ...