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. Nhibernate 分页功能

    cs: public IEnumerable<ArticleView> MyGetAll(int start, int limit, ref int count) { try { var ...

  2. MongoDB索引介绍

    MongoDB中的索引其实类似于关系型数据库,都是为了提高查询和排序的效率的,并且实现原理也基本一致.由于集合中的键(字段)可以是普通数据类型,也可以是子文档.MongoDB可以在各种类型的键上创建索 ...

  3. 从clone()谈protected

    看到Object的clone()是protected的,然后看到<java2认证考试指南>上描述:一个对象只能请求其他对象的克隆,后者的类与被克隆对象属于同一类,或是被克隆对象的子类. e ...

  4. 关于移动端和PC端的交互的区别

    对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...

  5. Linux内核态抢占机制分析

    http://blog.sina.com.cn/s/blog_502c8cc401012pxj.html [摘要]本文首先介绍非抢占式内核(Non-Preemptive Kernel)和可抢占式内核( ...

  6. QStringRef可以提高性能,下次注意使用;QPair方便了语法,函数可以一次返回多个返回值,方便使用

    而且QPair从此与各种QMap容器联系了起来,会非常好用.甚至QList也可以成双成对的使用元素了: QList<QPair<int, double> > list;list ...

  7. Tomcat 系统架构与设计模式,第 1 部分: 工作原理

    简介: 这个分为两个部分的系列文章将研究 Apache Tomcat 的系统架构以及其运用的很多经典设计模式.本文是第 1 部分,将主要从 Tomcat 如何分发请求.如何处理多用户同时请求,还有它的 ...

  8. spring cloud官方文档提到的服务开发的12项要素。

    I. Codebase 从一个代码库部署到多个环境. II. Dependencies 使用显式的声明隔离依赖,即模块单独运行,并可以显式管理依赖. III. Config 在系统外部存储配置信息. ...

  9. [译]GotW #6b Const-Correctness, Part 2

         const和mutable对于书写安全代码来说是个很有利的工具,坚持使用它们. Problem Guru Question 在下面代码中,在只要合适的情况下,对const进行增加和删除(包括 ...

  10. bzoj2756

    看到相邻格子都+1的操作一下就想到黑白染色了相邻格子都+1说明不管怎么弄,黑格子的总和和白格子总和的差总是定值这里首先要注意,最后不一定变成的是所有元素中的最大值,可能比它大比如 1 2 2     ...