为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 ...
随机推荐
- python 小程序 复制目录树
1. 将一个目录树完全复制到另外一个目录下面 import os, sys """ 复制目录树 """ maxloadsize = 1024 ...
- 【已更新】【原创】Chrome53 最新版惊现无厘头卡死 BUG!
发现问题 今天有客户向我们反馈了一个BUG:一个页面在IE.FireFox.Chrome52中能正常运行,但是在最新版的Chrome53中显示不了??? 习惯性的,我们需要客户提供页面在浏览器中的HT ...
- Theano conv2d的border_mode
文档是这么写的: border_mode: str, int or tuple of two int Either of the following: ``'valid'``: apply filte ...
- Memcached+PHP+Mysql+Linux 实践
首先确保你的服务器环境已经具备了memcached和lamp,关于在Linux上搭建memcahced+php环境可以参考我的另外一篇帖子( http://www.cnblogs.com/codeAB ...
- js判断浏览器类型
使用navigator.userAgent和来判断 PC端: <script type="text/javascript">var ua=navigator.userA ...
- Leetcode 365. Water and Jug Problem
可以想象有一个无限大的水罐,如果我们有两个杯子x和y,那么原来的问题等价于是否可以通过往里面注入或倒出水从而剩下z. z =? m*x + n*y 如果等式成立,那么z%gcd(x,y) == 0. ...
- iOS 开发总结(上)
来源:蝴蝶之梦天使 链接:http://www.jianshu.com/p/d333cf6ae4b0 在iOS开发中经常需要使用的或不常用的知识点的总结,几年的收藏和积累(踩过的坑). 一. iPho ...
- Word2016(2013)怎么从任意页插入起始页码
添加页码 1 小知识:双击任意页的页脚或页眉区域,激活页眉页脚设计界面.双击文档正文区域,返回正文编辑界面. 2 双击任意页的页脚或页眉区域,激活页眉页脚设计界面.单击"页码" ...
- 总结libevent安装方法
1.先用:ls -al /usr/lib | grep libevent 查看是否已安装,如果已安装且版本低于1.3,则先通过:rpm -e libevent -nodeps 进行卸载. 2.下载l ...
- EmployeeTest
package fourthf; public class EmployeeTest { public static void main(String[] args) { // TODO Auto-g ...