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. Vim文档编辑

    >##一.vim重复命令       ###1.重复执行上次命令       在普通模式下`.`(小数点)表示重复上一次的命令操作       拷贝测试文件到本地目录       ```   $ ...

  2. tensorflow 调试tfdbg

    1.执行pip install pyreadline 安装pyreadline 2.修改对应代码如下 with tf.Session() as sess: sess.run(tf.global_var ...

  3. Lock 从来就没有成功过

    package lime.thinkingInJava._021._005._003; import java.util.concurrent.ExecutorService; import java ...

  4. 【Android Studio】Gradle配置及问题解决

    Error:Failed to open zip file.Gradle's dependency cache may be corrupt (this sometimes occurs after ...

  5. Dart 语言简易教程系列

    google Fuchsia系统 及 dart语言简介 在 InteIIiJ IDEA 中搭建 Dart 的开发环境 Dart Linux 开发环境搭建 Dart 语言简易教程(一) Dart 语言简 ...

  6. Go语言基础之数组

    Go语言基础之数组 本文主要介绍数组(array)及它的基本使用. Array(数组) 数组是同一种数据类型元素的集合. 在Go语言中,数组从声明时就确定,使用时可以修改数组成员,但是数组大小不可变化 ...

  7. duilib中字体font设置

    <Font name="微软雅黑" size="9" bold="false"/> <Label name="n ...

  8. vue-router 进阶

    简单回顾一下vue基础部分 动态路由匹配 路由配置方法 export default new Router({ routes: [ { path: '/router01/:name', name: ' ...

  9. Python学习之旅(二十)

    Python基础知识(19):面向对象高级编程(Ⅱ) 定制类 形如“__xx__”的变量或函数在Python中是有特殊用途的 1.__str__ 让打印出来的结果更好看 __str__:面向用户:__ ...

  10. 解决url传中文参数问题

    项目中要做一个表格导出功能,用的是location.url传值给后台导出表格数据.由于传中文会出现乱码现象.故需要给参数转码,具体如下: 对于url要传的中文参数进行两次编码(注意是两次),即enco ...