select下拉框美化
2016-06-16 15:00
246 查看
其实用下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。
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 right center transparent; /*为下拉小箭头留出一点位置,避免被文字覆盖*/ padding-right: 14px; } /*清除ie的默认选择框样式清除,隐藏下拉箭头*/ select::-ms-expand { display: none; }
相关文章推荐
- C/C++中static、const的区别
- Java中,List菜单树的生成,最后转成json传给前台
- Linux下Tomcat的启动、关闭、杀死进程
- SIP可靠性(SIP Reliability)
- UIView的maskView属性
- 并发连接数、请求数、并发用户数
- awk命令的使用
- 在旋转数组中找最小的值
- logstash,nginx日志,grok pattern调试
- SharePoint 2013 CSOM 对象模型属性包
- Java集合---HashSet的源码分析
- 团队开发项目客户端——注册子系统的设计
- ios基本控件之UIAlertController
- C++读写Excel文件
- RAD 10.1多标签页bug
- H264视频压缩编码标准(四)
- 取消一个请求(Cancel)
- Git知识点总结
- 对Hongyang大神文章《Andoird 自定义ViewGroup实现竖向引导界面》的阅读笔记
- Android activity 切换动画