问题:

  在为表单添加下拉菜单时,有时候对菜单的样式没有特别的要求,就是需要修改下select元素的宽度和高度,但众所周知select元素的样式很难修改;

select在各个浏览器,字体大小为14px时的高度为20px

  希望是这样的,对边框样式也什么需求

  

  但在IE7,IE8下的表现确实这样的

  

差别有点明显,遂在select上设置line-height怎么都没有用,查看各个浏览器(没有测试safari和opera浏览器)设置line-height:对select的高度都没有什么影响;

解决办法:

  此方法不适用IE7及以下浏览器

  为了select也浏览器中有统一的高度,只给select元素设置padding来增加高度,对字体大小有限制的可以合并使用padding, font-size;从而达到统一的高度;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Bootstrap 101 Template</title>
<style>
select{width:200px; padding:20px 0; *height:60px/*为IE7设置高度*/}
</style>
</head>
<body>
<form>
<select>
<option value="0">人民币</option>
<option value="0">美元</option>
<option value="0">越南盾</option>
<option value="0">法郎</option>
</select>
</form>
</body>
</html>

总结:

对select高度有影响的CSS属性:height, padding, font-size, zoom

为select 设置样式的更多相关文章

  1. input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不 ...

  2. c# Chart设置样式

    一.chart属性熟悉 能够对C# chart控件属性熟悉起帮助的code, 现在分享给大家,Chart Operate Demo Code Download,如有帮助,别忘点个赞. Chart    ...

  3. 如何给DropDownList控件设置样式(ASP.NET MVC)

    前话: 应学校领导要求,要给后台管理系统添加一个搜索功能,提供可选择选项.我选择使用DropDownList去实现,熟悉.net控件的都知道,DropDownList的样子非常丑,不论是边框长宽还是里 ...

  4. 改变select箭头样式

    链接:https://blog.csdn.net/java_zhaoyanli/article/details/52549787 改变select箭头样式的方法: 1,去掉箭头: 2,设置图片为背景: ...

  5. word-wrap&&word-break,奇偶行、列设置样式

    1.word-wrap和word-break区分. 来源场景:机械租赁mvc驾驶员信息查看: 当备注的文字多的时候,第一列的值成这模样: 解决方案:设置table 的td可自动换行.首先table设置 ...

  6. 注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式

    注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...

  7. Vue系列: 如何通过组件的属性props设置样式

    比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...

  8. 【使用 DOM】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  9. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

随机推荐

  1. JavaScript 属性类型(数据属性和访问器属性)

    数据属性 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性有 4 个描述其行为的特性. [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修 ...

  2. java sound初探

    网上关于java sound的正规资源讲解的非常好,本文不再给出示例,主要提供一些好的资源,并说说我的一些理解,用于形成对java sound的整体认识. 一.几个词汇 TTS:text-to-spe ...

  3. PHP执行文档操作

    1.POWINTPOINT系列 之前参与过一个商城的项目,里面有将excel 导出的功能,但是如果要弄成PPT的我们应该怎么办呢?PHP是属于服务器端的 总不能在里面装个Powintpoint吧.于是 ...

  4. C#获取本地IP地址[常用代码段]

    获得当前机器的IP代码,假设本地主机为单网卡 string strHostName = Dns.GetHostName(); //得到本机的主机名 IPHostEntry ipEntry = Dns. ...

  5. Qt界面编程之多窗口切换

    1.基础知识 信号和槽 信号和槽都是函数,用来完成信号间的协同操作 2.多窗口切换实例       功能 实现登录和重新登录功能 组成 登录界面 和主窗体界面 3.源代码提供  

  6. css-css权威指南学习笔记8

    第十二章 列表与生成内容 1.list-style-type:cjk-ideographic生成一二三四的序号 2.不管是ul还是ol,list-style-type无法识别的值都应用为decimal ...

  7. MVC5知识点记录

    IIS/ASP.NET管道 原理永远是重中之重,所以在开篇的地方,先了解一下地址栏输入网址回车之后的故事. 不同IIS版本处理请求也不一样 IIS5 IIS 5.x 运行在进程InetInfo.exe ...

  8. dos 命令帮助文档chm

    http://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/ntcmds.mspx?mfr=true

  9. 原生JS会跳动的电子表

     一个会跳动的电子表,源码--time.html  图片--img github地址:https://github.com/1056237661/practiceCode <!DOCTYPE h ...

  10. [译]C#编码约定

    原文:https://msdn.microsoft.com/en-us/library/ff926074.aspx 编码约定的目的是: 创建统一格式的代码,让读者的注意力更集中在内容上面,而不是结构 ...