Rumah > hujung hadapan web > html tutorial > 为select 设置样式 - sun懒虫

为select 设置样式 - sun懒虫

WBOY
Lepaskan: 2016-05-22 17:19:45
asal
1686 orang telah melayarinya

问题:

  在为表单添加下拉菜单时,有时候对菜单的样式没有特别的要求,就是需要修改下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>
Salin selepas log masuk

 

总结:

对select高度有影响的CSS属性:height, padding, font-size, zoom

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan