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. Codeforces Round #329 div2

    Problem_A(593A): 题意: 给n个单词, 每个单词由小写字母组成, 且长度<=1000. 组成一篇文章的要求是: 所有单词所用字母 <= 2 即最多只能有两个不同的字母. 求 ...

  2. 虚拟机重复创建系统去除SID

    我们安装完的操作系统都会有一个SID,为了简化安装,现在大部分人会选择GHOST克隆安装,经过克隆后的系统SID是相同的,有时需要重新获取SID    以前WIN2003有修改SID的工具NEWSID ...

  3. 解决“重新安装vmware-tools”灰色而无法安装的问题

    前几天重装系统,之后虚拟机需要重新装,装好后要使用vmware-tools实现文件共享,却发现虚拟机那里显示为灰色的,无法安装vmware-tools,在共享文件夹那里设置好共享的文件夹猴也没有用,/ ...

  4. Django中的Model继承

    Django 中的 model 继承和 Python 中的类继承非常相似,只不过你要选择具体的实现方式:让父 model 拥有独立的数据库:还是让父 model 只包含基本的公共信息,而这些信息只能由 ...

  5. html5 高级动画精灵

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. SSH框架中配置Hibernate使用proxool连接池

    一.导入proxool.jar包 案例用的是proxool-0.8.3.jar,一般通过MyEclipse配置的SSH都会包含这个jar,如果没有,就去网上搜下下载导入就好了. 二.新建Proxool ...

  7. hdu4432 Sum of divisors(数论)

    Sum of divisors Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  8. 【HDOJ】1230 火星A+B

    个人觉得这道题没那么水,wa了几次,才发现自己居然没有给srcb数组reset,打错了.搞死啊. #include <stdio.h> #include <string.h> ...

  9. [LeetCode#272] Closest Binary Search Tree Value II

    Problem: Given a non-empty binary search tree and a target value, find k values in the BST that are ...

  10. C#中窗体的一些简单运用

    从今天开始,我们进入到学window form的知识,今天简单的学习了一些控件和事件的运用.没有什么很全面的理论,所以今天就总结下所写的程序.一个简单的注册页面程序   注册页面程序   要求:   ...