为select 设置样式
Posted SINGLE DOG
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为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 设置样式的主要内容，如果未能解决你的问题，请参考以下文章