CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。

  1. select {
  2. /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
  3. border: solid 1px #000;
  4. /*很关键:将默认的select选择框样式清除*/
  5. appearance:none;
  6. -moz-appearance:none;
  7. -webkit-appearance:none;
  8. /*在选择框的最右侧中间显示小箭头图片*/
  9. background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
  10. /*为下拉小箭头留出一点位置,避免被文字覆盖*/
  11. padding-right: 14px;
  12. }
  13. /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
  14. select::-ms-expand { display: none; }

参考链接:
http://uplifted.NET/programming/change-default-select-dropdown-style-just-css/

自己修改select的样式(修改select右边的小三角)的更多相关文章

  1. 今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐。最后找到问题所在doctype

    今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐.最后找到问题所在doctype <-- 这个小箭头

  2. 解决手机浏览器和微信中select中border:none;无用和去掉小三角

    设置select的边框为none:在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框 解决办法: appearance:none; -moz-appearance:none; /* Fi ...

  3. 用CSS样式写选择框右侧小三角

    直接上代码! <!DOCTYPE html><html lang="en"><head> <title>小三角</title& ...

  4. 修改radio、checkbox、select默认样式的方法

    样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...

  5. select下拉框option的样式修改

    select原样式: 进行样式修改后的样式: 附上修改代码: //select外面必须包裹一个div,用来覆盖select原有的样式<div class="option"&g ...

  6. 【css】 如何修改select的样式

    select { /*清除select默认样式*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appear ...

  7. select 下拉框样式修改 option文字居右

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

  8. m_Orchestrate learning system---三十六、如何修改插件的样式(比如ueditor)

    m_Orchestrate learning system---三十六.如何修改插件的样式(比如ueditor) 一.总结 一句话总结:所有的js,html插件,修改样式无非是两种,一是直接修改css ...

  9. vue中修改子组件样式

    一.问题叙述 项目里需要新添加一个表单页面,里面就只是几个select,这个几个select是原本封装好的组件,有自己原本的样式,而这次的原型图却没有和之前的样式统一起来,需要微调一下,这里就涉及到父 ...

随机推荐

  1. poj 3415 Common Substrings(后缀数组+单调栈)

    http://poj.org/problem?id=3415 Common Substrings Time Limit: 5000MS   Memory Limit: 65536K Total Sub ...

  2. javascript和jquery动态创建html元素

    1.javascript创建元素 创建select var select = document.createElement("select");        elect.opti ...

  3. java.util.ArrayList

    /* * Copyright (c) 1997, 2013, Oracle and/or its affiliates. All rights reserved. * ORACLE PROPRIETA ...

  4. SDUT 1269 走迷宫(BFS)

    点我看题目 题意:中文不详述. 思路 :上上上场比赛让一个BFS给虐了,上次比赛让一个三维的给废掉了.......所以急于从水题刷起......还因为数组开小了WA了5,6次 #include < ...

  5. POJ 2942 Knights of the Round Table(双连通分量)

    http://poj.org/problem?id=2942 题意 :n个骑士举行圆桌会议,每次会议应至少3个骑士参加,且相互憎恨的骑士不能坐在圆桌旁的相邻位置.如果意见发生分歧,则需要举手表决,因此 ...

  6. HDU3367+并查集应用

    题意:找到一个这样的图,在这个图中,最多有一个环. 使得所有的边的和最大. 贪心+并查集 首先把边排序,然后开始分类讨论. 对于边ab(含有两个端点ab) 如果a,b是属于两个不同的集合 a b 是两 ...

  7. android 小米手机连接到电脑adb无法识别 解决方案

    下载并安装小米手机助手 它会自动帮你安装驱动程序 安装成功后重启一下adb服务 应该就可以了

  8. scrollView的几个属性contentSize contentOffset contentInset

    01-  ontentSize是scrollview可以滚动的区域 比如frame = (0 ,0 ,320 ,480) contentSize = (320 ,960), 代表你的scrollvie ...

  9. QAbstractItemView为截断的项显示ToolTip(在eventFilter函数里覆盖QEvent::ToolTip事件)

    在Qt中想要为QAbstractItemView中长度不够而使得内容被截断的项显示ToolTip,Qt官网有一篇文章介绍使用事件过滤器来显示太长的项,但是没有涵盖图标的情况.显示列头项太长的情况等等, ...

  10. 【 随笔 】 JavaScript 图形库的流行度调查

    2014年可以说是 JavaScript 最风光的一年,成为上升最快的语言,在 Github 上最受关注的前10个仓库中,有7个是基于 JavaScript 开发的,数不胜数的函数库可适应于各种需求. ...