為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


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com