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; }

原文https://www.cnblogs.com/lsy26/p/5840860.html

重写select样式的更多相关文章

  1. 打造自定Select样式

    打造自定Select样式 我们为什么要自定义select样式? 1.select最大的一个缺陷就是不能自定义下拉按钮的样式. 效果图: 在线演示地址: http://www.smallui.com/j ...

  2. 修改 页面中默认的select样式

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

  3. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  4. SELECT样式,兼容IE6

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS效果:CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  6. 通过css属性hack完成select样式美化,并兼容IE

    最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...

  7. IE、火狐、谷歌浏览器下兼容统一select样式

    项目开发时,对于不同浏览器下的select样式不统一问题,各种查,这里记录一下,项目已使用 IE浏览器下样式: 火狐浏览器下样式: 谷歌浏览器下样式: 上代码: 1.html 2.css 至此,大功告 ...

  8. select样式调整

    如果select样式如下图:是因为添加了 border-color:#adb7d6; border-width:1px; 样式 删除上面两个样式属性,效果如下图:

  9. jqueryMobile中select样式自定义

    要去掉引入的jqueryMobile给下拉框组件的样式,有两种办法. 第一种:全局的去掉所有的下拉框样式: <link rel="stylesheet" href=" ...

随机推荐

  1. gsoap使用总结

    WebService.soap.gsoap基本概念 WebService服务基本概念:就是一个应用程序,它向外界暴露出一个可以通过web进行调用的API,是分布式的服务组件.本质上就是要以标准的形式实 ...

  2. acl && prefix list

    acl number 2001                                         设置acl的编号rule 0 permit source 1.1.1.0 0.0.0.2 ...

  3. Android 最流行的吸顶效果的实现及代码

    开始逐渐领略到ItemDecoration的美~ 今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的Re ...

  4. linux cent os 6.5安装Nginx

    1.下载相关组件 yum install -y gcc gcc-c++ 安装C/C++编译器 wget http://sourceforge.net/projects/pcre/files/pcre/ ...

  5. 【Dubbo 源码解析】03_Dubbo Protocol&Filter

    Protocol & Filter Dubbo 服务暴露和服务引用都是通过的 com.alibaba.dubbo.rpc.Protocol 来实现的.它是一个 SPI 扩展. @SPI(&qu ...

  6. 阿里云负载均衡SLB 七层https协议 nginx 获取真实IP

    https://www.cnblogs.com/baylorqu/p/8565667.html https://help.aliyun.com/document_detail/54007.html

  7. <转>牛顿法与拟牛顿法

    转自:http://blog.csdn.net/itplus/article/details/21896619 机器学习算法中经常碰到非线性优化问题,如 Sparse Filtering 算法,其主要 ...

  8. css特效 - 环形文字

    记一次群友问题和回答: 下面这种效果,文字是动态的,不能使用图片的情况下,前端怎么实现? 一.插件实现: arctext.js 教程地址:实现文字平滑弯曲弧形效果的插件-arctext.js 二.原生 ...

  9. pymysql.err.InterfaceError: (0, '')解决办法

    导致这个错误的原因是通过pymysql连接MySQL,没有关闭连接的操作,所以短时间内不会出问题,长时间保持这个连接会出现连接混乱.虽然看着自己的代码没错,还是会报 pymysql.err.Inter ...

  10. mybatis09--自连接一对多查询

    查询导师 下面的所有 老师的信息! 创建实体类 和对应的数据库 /** *导师的实体类 */ public class Teacher { private Integer id; private St ...