大家都知道select是无法设置高度和边框颜色等等的在ie67下面，其他的都是可以的，所以有时候为了在所有的浏览器下显示都一致，就使用了 js的模拟，这个是大家经常碰到的，js不光要模拟外观还有模拟事件，有时候感觉有些麻烦，但是js模拟的最大优势就是外观可以任意设置，通用性强，就是 在操作提交数据的时候有些麻烦，因为这个要用在不同的位置。就需要写很多不同的class或者id。（不过js还是最合适的）

我想尝试使用css来模拟实现可改变高度，其实ie67下可以通过设置font-size来实现改变select的高度，但是这个是个不是很靠谱的方法，我说下我实现的原理：

第一步：就是在select外边加上两个div分别是 select-outer 和select-inner，然后给他们成inline-block，这样主要为了模拟select是内联元素，然后给select-inner设置一个 宽度和高度，这个宽度和高度就是实现重点，为什么呢？大家可以自己做个测试，看看一个不设置任何属性的select高度是多少？这个我做了测试，但是我给 select设置了font-size:12px;因为这个是基本的不然汉字都看不清楚别的就不需要在谈了，然后我给select设置了 border:1px solid #ccc;同理也是为了统一不同的浏览器对select边框设置的不同，在这两个前提下我做了测试：IE67：21px； IE8：19px；IE9：18px；FF：18px；chrome：19px；safari：18px；从结果上可以看出，这种情况下的select的 高度最大是21最小是18，还有就是我们发现ie67是一样的，并且只有ie67不能更改高度，那么解决的方案来了，那就是把select的高度设置 21，那么这个时候所有的浏览器的select的高度相同了，第一步解决了。

第二步：截掉select默认的边框，这个时候我们的select-inner就派上用场了，方法是给select设置 position:relative;margin:-1px;然后给select-inner 设置高度，高度就是上面的21-2=19，我想这个大家应该明白用意了，然后设置overflow:hidden，以及display:inline- block（这里就不再介绍它的兼容设置了，相信大家都很熟悉了）,这样设置完在浏览器中看，除去ie67有瑕疵外其余的良好边框被截掉，但是ie67下 的左右边框截取的不好，想想应该是没有给select-inner设置宽度的原因，设置了宽度后ok都正常，现在的问题来了，宽度是多少取决于你给 select设置了多度是多少？所以当select使用在诸多不同的位置的时候这个问题怎么解决呢？这个也着实让我很头疼没有办法解决（如果你有好的方法 可以告诉我），最后我使用了一个比较笨的方案，那就是给select-outer再加上一个class来控制宽度，这样灵活性变得差了许多。

第三步：设置改变高度，我想你如果仔细看完上面的内容，那么答案就很简单了，那个是select-outer设置padding，这个 padding-bottom=padding-top=(你要设置的高度-19)/2,当然padding的左右是多少你可以设置。然后给 select-outer设置你想要的边框和边框颜色，到这里就基本上完成了。其实我们可以把padding和边框等等设置到上面说的另加的class上 去，这样只需要换这个class即可以不同的显示效果了！

下面是代码示例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <style type="text/css">
 * { padding:0; margin:0; }
 body { text-align:center; padding:50px;}
 .select-outer { display:inline-block; *display:inline; zoom:1; border:1px solid #ccc; }
 .select-inner { display:inline-block; *display:inline; zoom:1; height:19px; overflow:hidden; position:relative; }
 .select-h { border:1px solid #ccc; height:21px; font-size:12px; position:relative; zoom:1; margin:-1px; }
 .select-wh200 { padding:3px; }
 .select-wh200 .select-inner { width:200px; }
 .select-wh200 select { width:202px; }
 </style>
 </head>
 <body>
 <div class="select-outer select-wh200">

 <div class="select-inner">
 <select name="" class="select-h">
 <option value="">web标准学习aa</option>
 <option value="">jQuery学习</option>
 </select>
 </div>
 </div>
 <div class="select-outer select-wh200">
 <div class="select-inner">
 <select name="" class="select-h">
 <option value="">web标准学习</option>
 <option value="">jQuery学习</option>
 </select>
 </div>
 </div>
 <div class="select-outer select-wh200">
 <div class="select-inner">
 <select name="" class="select-h">
 <option value="">web标准学习</option>
 <option value="">jQuery学习</option>
 </select>
 </div>
 </div>
 </body>
 </html>

css设置select高度（IE，FF,Chrome）[转]的更多相关文章

  1. CSS - 设置 select 元素的样式

    注意:option 外面有个框,这个框不同浏览器生成的还不一样,给这个框设置样式的方法也没有找到(有说法是这是浏览器创建的 shadow dom 没法设置).所以要想完全控制还是用列表进行模拟比较好. ...

  2. 纯css设置元素高度与宽度相等

    设置图片高度等于宽度 .img-box{ width:100%; height:0; position: relative; padding-bottom: 100% } .img-box img{ ...

  3. css设置div高度与宽度相等的一种方法

    div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...

  4. 前端开发：css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

    前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...

  5. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...

  6. css设置自适应屏幕高度

    <style type="text/css"> body,html{ margin:0; height:100%; /*这里将高度设置为100%是这个布局实现自适应高度 ...

  7. CSS百分比定义高度的冷知识

    当我们给块级元素设置响应式高度的时候,例如给div设置height=50%,往往没能看到效果. 原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的. 需要了解的是对 ...

  8. uni-app swiper设置自定义高度

    话不多少先上图, 大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域. 大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要 ...

  9. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

随机推荐

  1. iOS之2016面试题三

    1.OC内存管理机制 1).当你使用new,alloc和copy方法创建一个对象时,该对象的保留计数器值为 1.当你不再使用该对象时,你要负责向该对象发送一条release或autorelease消息 ...

  2. Objective-C语法之KVO使用

    本文转自:http://blog.csdn.net/yuquan0821/article/details/6646400/ 一,概述 KVO,即:Key-Value Observing,它提供一种机制 ...

  3. C语言关于利用sscanf实现字符串相加减

    #include<stdio.h>#include<string.h>void main(){ int a; int b; char str1[10] = "9999 ...

  4. HashSet 浅析示例

    * 1.继承自抽象类 AbstractSet,实现接口 Set.Cloneable.Serializable: * 2.元素无顺序: * 3.元素不可重复: * 4.采用哈希算法插入数据,插入速度快: ...

  5. 2、软件设计师要阅读的书籍 - IT软件人员书籍系列文章

    软件设计师在项目组中的地位比软件工程师相对要高一些.但是他们所要阅读的书籍差别还是比较大的.同样的,软件设计师也要阅读比较多的书籍,以能够完成项目的任务为目的,同时还要提高自身在项目组中的竞争地位,而 ...

  6. CLR简介（一）

    什么是通用语言运行时(CLR),简单来讲: CLR是一个支持多种编程语言及多语言互操作,完整的高级虚拟机. 有点拗口,而且不是很有启发性,但上面的文字是将又大又复杂的CLR的功能归类以便容易理解的第一 ...

  7. 使用multi-paxos实现日志同步应用

    paxos 说multi-paxos之前先简要说一下paxos paxos是在多个成员之间对某个值(提议)达成一致的一致性协议.这个值可以是任何东西.比如多个成员之间进行选主,那么这个值就是主的身份. ...

  8. .NET系列文章——近一年文章分类整理，方便各位博友们查询学习

    由于博主今后一段时间可能会很忙(准备出书:<.NET框架设计—模式.配置.工具>,外加换了新工作),所以博客会很少更新: 在最近一年左右时间里,博主各种.NET技术类型的文章都写过,根据博 ...

  9. W3School-CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) ...

  10. 分布式搜索引擎ElasticSearch+Kibana (Marvel插件安装详解)

    在安装插件的过程中,尤其是安装Marvel插件遇到了很多问题,要下载license.Marvel-agent,又要下载安装Kibana 版本需求 Java 7 or later Elasticsear ...