为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 ...
随机推荐
- [LeetCode] Valid Anagram 验证变位词
Given two strings s and t, write a function to determine if t is an anagram of s. For example, s = & ...
- [LeetCode] Course Schedule II 课程清单之二
There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may have prer ...
- go 常用包
标准的 Go 代码库中包含了大量的包,并且在安装 Go 的时候多数会伴随一起安 装.浏览 $GOROOT/src/pkg 目录并且查看那些包会非常有启发. fmt:包 fmt 实现了格式化的 I/O ...
- MySQL性能优化
当今数据库的操作越来越成为整个应用的性能瓶颈,特别是Web应用更加明显.当我们设计数据库和对数据库操作时,都要考虑到性能. 1.优化查询语句,方便查询缓存 大多数MySQL服务器都开启了查询缓存,这是 ...
- php设计模式--面向对象
php链式操作的实现: 特点:1.链式操作一般存在于面向对象的情况下链式操作才有意义 /* * SQL语句组合实例类,始发文章web开发笔记 * 学习用,非专业类 * */ class sql{ pr ...
- windows server 2008 各版本号下载地址(微软官网)
前言: 微软官网上下载系统的镜像文件要远比百度网盘下载起来得更快. Windows Server 2008 32-bit Standard(标准版)
- 对于多个数据库表对应一个Model问题的思考
最近做项目遇到一个场景,就是客户要求为其下属的每一个分支机构建一个表存储相关数据,而这些表的结构都是一样的,只是分属于不同的机构.这个问题抽象一下就是多个数据库表对应一个Model(或者叫实体类).有 ...
- vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-v ...
- BZOJ 后缀自动机四·重复旋律7
后缀自动机四·重复旋律7 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一段音乐旋律可以被表示为一段数构成的数列. 神奇的 ...
- POJ2096 Collecting Bugs
Time Limit: 10000MS Memory Limit: 64000K Total Submissions: 5090 Accepted: 2529 Case Time Limit: ...