为select 设置样式
问题:
在为表单添加下拉菜单时,有时候对菜单的样式没有特别的要求,就是需要修改下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 设置样式的更多相关文章
- input与select 设置相同宽高,在浏览器上却显示不一致,不整齐
遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input width,height 值里面, 不 ...
- c# Chart设置样式
一.chart属性熟悉 能够对C# chart控件属性熟悉起帮助的code, 现在分享给大家,Chart Operate Demo Code Download,如有帮助,别忘点个赞. Chart ...
- 如何给DropDownList控件设置样式(ASP.NET MVC)
前话: 应学校领导要求,要给后台管理系统添加一个搜索功能,提供可选择选项.我选择使用DropDownList去实现,熟悉.net控件的都知道,DropDownList的样子非常丑,不论是边框长宽还是里 ...
- 改变select箭头样式
链接:https://blog.csdn.net/java_zhaoyanli/article/details/52549787 改变select箭头样式的方法: 1,去掉箭头: 2,设置图片为背景: ...
- word-wrap&&word-break,奇偶行、列设置样式
1.word-wrap和word-break区分. 来源场景:机械租赁mvc驾驶员信息查看: 当备注的文字多的时候,第一列的值成这模样: 解决方案:设置table 的td可自动换行.首先table设置 ...
- 注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式
注意Android里TextView控件的一个小坑,用android:theme来设置样式时动态载入的layout会丢失该样式 这个坑,必须要注意呀, 比如在用ListView的时候,如果在List_ ...
- Vue系列: 如何通过组件的属性props设置样式
比如我们要在vue中显示百度地图,然后将相关的代码包装成组件,然后需要由外部来设置组件的高度,关于props的介绍,可以参考: http://cn.vuejs.org/guide/components ...
- 【使用 DOM】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
- 【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
随机推荐
- JavaScript 属性类型(数据属性和访问器属性)
数据属性 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性有 4 个描述其行为的特性. [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修 ...
- java sound初探
网上关于java sound的正规资源讲解的非常好,本文不再给出示例,主要提供一些好的资源,并说说我的一些理解,用于形成对java sound的整体认识. 一.几个词汇 TTS:text-to-spe ...
- PHP执行文档操作
1.POWINTPOINT系列 之前参与过一个商城的项目,里面有将excel 导出的功能,但是如果要弄成PPT的我们应该怎么办呢?PHP是属于服务器端的 总不能在里面装个Powintpoint吧.于是 ...
- C#获取本地IP地址[常用代码段]
获得当前机器的IP代码,假设本地主机为单网卡 string strHostName = Dns.GetHostName(); //得到本机的主机名 IPHostEntry ipEntry = Dns. ...
- Qt界面编程之多窗口切换
1.基础知识 信号和槽 信号和槽都是函数,用来完成信号间的协同操作 2.多窗口切换实例 功能 实现登录和重新登录功能 组成 登录界面 和主窗体界面 3.源代码提供
- css-css权威指南学习笔记8
第十二章 列表与生成内容 1.list-style-type:cjk-ideographic生成一二三四的序号 2.不管是ul还是ol,list-style-type无法识别的值都应用为decimal ...
- MVC5知识点记录
IIS/ASP.NET管道 原理永远是重中之重,所以在开篇的地方,先了解一下地址栏输入网址回车之后的故事. 不同IIS版本处理请求也不一样 IIS5 IIS 5.x 运行在进程InetInfo.exe ...
- dos 命令帮助文档chm
http://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/ntcmds.mspx?mfr=true
- 原生JS会跳动的电子表
一个会跳动的电子表,源码--time.html 图片--img github地址:https://github.com/1056237661/practiceCode <!DOCTYPE h ...
- [译]C#编码约定
原文:https://msdn.microsoft.com/en-us/library/ff926074.aspx 编码约定的目的是: 创建统一格式的代码,让读者的注意力更集中在内容上面,而不是结构 ...