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. hdu 3746 Cyclic Nacklace (KMP求最小循环节)

    //len-next[len]为最小循环节的长度 # include <stdio.h> # include <algorithm> # include <string. ...

  2. spi flash 操作

    W25Q16V 是华邦出的一颗 spi flash. 25系列是比较通用的一个系列. 后面的数字 16 跟容量有关, 16 表示 16Mbits, 相当于 2MB. 与此类似的还有 W25Q128V ...

  3. (转载)display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  4. Hdu3785

    <span style="color:#6600cc;">/* G - 寻找大富翁 Time Limit:1000MS Memory Limit:32768KB 64b ...

  5. SenTestingKit.framework的报错!

    本文转载至http://www.cocoachina.com/ask/questions/show/106912 ld: building for iOS Simulator, but linking ...

  6. TCP客户服务端

    创建TCP服务端1.创建一个ServerSocket对象.2.调用accept()方法接收客户端请求.3.从Socket中获取I/O流.4.对I/O流进行读写操作,完成与客户端的交互.5.关闭I/O流 ...

  7. 一个实用的UIView的类别

    // // FrameAccessor.h // FrameAccessor // // Created by Alex Denisov on 18.03.12. // Copyright (c) 2 ...

  8. MyEclipse注释配置

    MyEclipse注释配置 配置路径 1.1.      JAVA 打开MyEclipse,选择Window>Preferences>Java>Code Style>Code ...

  9. linux:在vmware上模拟新加一个硬盘对其格式化分区

    在实际情况中,很容易有系统硬盘空间不够,然后需要添加新硬盘情况:这里我用vmware来模拟实验: 一:在一个Linux vmware上创建一个虚拟硬盘   1.打开vmware,选择一个已经搭建好的l ...

  10. ubuntu 源、codename 与 sources.list 文件

    查看 codename $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubunt ...