為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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM