select的高度问题

alan9101 2013-01-22 04:09:10
<td><select name="find" style="width:100px;height:50px">
<option value = "/home/test/a">高级</option>
<option value = "/home/test/b">cu</option>
<option value = "/home/test/c">tomer</option>
<option value = "/home/test/d">mer</option>
</select>
本人刚学习html，请问下select高度怎么调整？
...全文
691 16 打赏 收藏 转发到动态 举报
写回复
用AI写文章
16 条回复
切换为时间正序
请发表友善的回复…
发表回复
「已注销」 2013-01-24
  • 打赏
  • 举报
 回复
<select style="height:50px;"></select> google，IE10，firefox可以改，IE低版本没有试过。
pei_zhenxi 2013-01-24
  • 打赏
  • 举报
 回复
请问一下，你说说下拉框调整还是说下拉框选项里面的调整？ 就下拉框高度调整，你写的这个不是已经可以了吗？至于里面选项的高度调整，呵呵 不清楚。。
ImN1 2013-01-24
  • 打赏
  • 举报
 回复
接上一楼…… select2css.js 
/*#############################################################
Name: Select to CSS
Version: 0.2
Author: Utom
URL: http://utombox.com/
#############################################################*/
var selects = document.getElementsByTagName('select');

var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false;

function $(id) {
	return document.getElementById(id);
}

function stopBubbling (ev) {	
	ev.stopPropagation();
}

function rSelects() {
	for (i=0;i<selects.length;i++){
		selects[i].style.display = 'none';
		select_tag = document.createElement('div');
			select_tag.id = 'select_' + selects[i].name;
			select_tag.className = 'select_box';
		selects[i].parentNode.insertBefore(select_tag,selects[i]);

		select_info = document.createElement('div');	
			select_info.id = 'select_info_' + selects[i].name;
			select_info.className='tag_select';
			select_info.style.cursor='pointer';
		select_tag.appendChild(select_info);

		select_ul = document.createElement('ul');	
			select_ul.id = 'options_' + selects[i].name;
			select_ul.className = 'tag_options';
			select_ul.style.position='absolute';
			select_ul.style.display='none';
			select_ul.style.zIndex='999';
		select_tag.appendChild(select_ul);

		rOptions(i,selects[i].name);
		
		mouseSelects(selects[i].name);

		if (isIE){
			selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble = true;");
		}
		else if(!isIE){
			selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"')");
			selects[i].addEventListener("click", stopBubbling, false);
		}		
	}
}


function rOptions(i, name) {
	var options = selects[i].getElementsByTagName('option');
	var options_ul = 'options_' + name;
	for (n=0;n<selects[i].options.length;n++){	
		option_li = document.createElement('li');
			option_li.style.cursor='pointer';
			option_li.className='open';
		$(options_ul).appendChild(option_li);

		option_text = document.createTextNode(selects[i].options[n].text);
		option_li.appendChild(option_text);

		option_selected = selects[i].options[n].selected;

		if(option_selected){
			option_li.className='open_selected';
			option_li.id='selected_' + name;
			$('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML));
		}
		
		option_li.onmouseover = function(){	this.className='open_hover';}
		option_li.onmouseout = function(){
			if(this.id=='selected_' + name){
				this.className='open_selected';
			}
			else {
				this.className='open';
			}
		} 
	
		option_li.onclick = new Function("clickOptions("+i+","+n+",'"+selects[i].name+"')");
	}
}

function mouseSelects(name){
	var sincn = 'select_info_' + name;

	$(sincn).onmouseover = function(){ if(this.className=='tag_select') this.className='tag_select_hover'; }
	$(sincn).onmouseout = function(){ if(this.className=='tag_select_hover') this.className='tag_select'; }

	if (isIE){
		$(sincn).onclick = new Function("clickSelects('"+name+"');window.event.cancelBubble = true;");
	}
	else if(!isIE){
		$(sincn).onclick = new Function("clickSelects('"+name+"');");
		$('select_info_' +name).addEventListener("click", stopBubbling, false);
	}

}

function clickSelects(name){
	var sincn = 'select_info_' + name;
	var sinul = 'options_' + name;	

	for (i=0;i<selects.length;i++){	
		if(selects[i].name == name){				
			if( $(sincn).className =='tag_select_hover'){
				$(sincn).className ='tag_select_open';
				$(sinul).style.display = '';
			}
			else if( $(sincn).className =='tag_select_open'){
				$(sincn).className = 'tag_select_hover';
				$(sinul).style.display = 'none';
			}
		}
		else{
			$('select_info_' + selects[i].name).className = 'tag_select';
			$('options_' + selects[i].name).style.display = 'none';
		}
	}

}

function clickOptions(i, n, name){		
	var li = $('options_' + name).getElementsByTagName('li');

	$('selected_' + name).className='open';
	$('selected_' + name).id='';
	li[n].id='selected_' + name;
	li[n].className='open_hover';
	$('select_' + name).removeChild($('select_info_' + name));

	select_info = document.createElement('div');
		select_info.id = 'select_info_' + name;
		select_info.className='tag_select';
		select_info.style.cursor='pointer';
	$('options_' + name).parentNode.insertBefore(select_info,$('options_' + name));

	mouseSelects(name);

	$('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML));
	$( 'options_' + name ).style.display = 'none' ;
	$( 'select_info_' + name ).className = 'tag_select';
	selects[i].options[n].selected = 'selected';

}

window.onload = function(e) {
	bodyclick = document.getElementsByTagName('body').item(0);
	rSelects();
	bodyclick.onclick = function(){
		for (i=0;i<selects.length;i++){	
			$('select_info_' + selects[i].name).className = 'tag_select';
			$('options_' + selects[i].name).style.display = 'none';
		}
	}
}
ImN1 2013-01-24
  • 打赏
  • 举报
 回复
居然找到这么个收藏……
按下面的结构放置文件，不是我的作品，注意版权信息
css\select2css.css
images\mac-select.gif
images\tm2008-select.gif
images\ubox-select.gif
index.html
js\select2css.js


mac-select.gif

tm2008-select.gif

ubox-select.gif

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

<!--

	@import url(css/select2css.css);

-->

</style>

<script type="text/javascript" src="js/select2css.js"></script>

</head>

<body>

<form id="form" name="form" method="post" action="">

  <br />

<div id="uboxstyle">

<h3 style="color:#6D93AB;font-size:14px;">U-Box Style</h3>

	<select name="language" id="language">

		<option value="English"  selected="selected">English</option>

		<option value="简体中文" >简体中文</option>

		<option value="日本語" >日本語</option>

		<option value="Deutsch" >Deutsch</option>

		<option value="Espa?ol" >Espa?ol</option>

		<option value="Fran?ais" >Fran?ais</option>

		<option value="Italiano" >Italiano</option>

		<option value="Polski" >Polski</option>

		<option value="Português" >Português</option>

		<option value="Svenska" >Svenska</option>

		<option value="Türk?e" >Türk?e</option>

		<option value="Руccкий" >Руccкий</option>

	</select>

</div>

<br /><br />

<h3 style="color:#6D93AB;font-size:14px;">Mac Style</h3>

<div id="macstyle">

	<select name="language_mac" id="language_mac">

		<option value="English"  selected="selected">English</option>

		<option value="简体中文" >简体中文</option>

		<option value="日本語" >日本語</option>

		<option value="Deutsch" >Deutsch</option>

		<option value="Espa?ol" >Espa?ol</option>

		<option value="Fran?ais" >Fran?ais</option>

		<option value="Italiano" >Italiano</option>

		<option value="Polski" >Polski</option>

		<option value="Português" >Português</option>

		<option value="Svenska" >Svenska</option>

		<option value="Türk?e" >Türk?e</option>

		<option value="Руccкий" >Руccкий</option>

	</select>

</div>

<br /><br />

<h3 style="color:#6D93AB;font-size:14px;">TM2008 Style</h3>

<div id="tm2008style">

	<select name="language_tm2008" id="language_tm2008">

		<option value="English">English</option>

		<option value="简体中文" >简体中文</option>

		<option value="日本語" >日本語</option>

		<option value="Deutsch" >Deutsch</option>

		<option value="Espa?ol" >Espa?ol</option>

		<option value="Fran?ais" >Fran?ais</option>

		<option value="Italiano" >Italiano</option>

		<option value="Polski" >Polski</option>

		<option value="Português" >Português</option>

		<option value="Svenska" >Svenska</option>

		<option value="Türk?e" >Türk?e</option>

		<option value="Руccкий" >Руccкий</option>

	</select>

</div>

</form>



<div style="width:550px;margin:20px auto;">

<p><strong><a href="http://js.niutuku.com">牛图库整理</a></strong> </p>

<p>转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>

</div>



</body>

</html>

select2css.css
body { background:#CFDFEF; font:12px/150% "Lucida Grande", Arial, Verdana, Helvetica, sans-serif; }

#uboxstyle .select_box { width:100px; height:24px; }

#macstyle .select_box { width:91px; height:24px; }

#tm2008style .select_box { width:102px; height:24px; }

#uboxstyle div.tag_select { display:block; color:#79A2BD; width:80px; height:24px; background:transparent url("../images/ubox-select.gif") no-repeat 0 0; padding:0 10px; line-height:24px; }

#uboxstyle div.tag_select_hover { display:block; color:#79A2BD; width:80px; height:24px; background:transparent url("../images/ubox-select.gif") no-repeat 0 -24px; padding:0 10px; line-height:24px; }

#uboxstyle div.tag_select_open { display:block; color:#79A2BD; width:80px; height:24px; background:transparent url("../images/ubox-select.gif") no-repeat 0 -48px; padding:0 10px; line-height:24px; }

#uboxstyle ul.tag_options { position:absolute; padding:0; margin:0; list-style:none; background:transparent url("../images/ubox-select.gif") no-repeat right bottom; width:100px; padding:0 0 5px; margin:0; }

#uboxstyle ul.tag_options li { background:transparent url("../images/ubox-select.gif") repeat-y -100px 0; display:block; width:80px; padding:0 10px; height:24px; text-decoration:none; line-height:24px; color:#79A2BD; }

#uboxstyle ul.tag_options li.open_hover { background:transparent url("../images/ubox-select.gif") no-repeat 0 -72px; color:#fff }

#uboxstyle ul.tag_options li.open_selected { background:transparent url("../images/ubox-select.gif") no-repeat 0 -96px; color:#fff }

#macstyle div.tag_select { display:block; color:#000; width:71px; height:24px; background:transparent url("../images/mac-select.gif") no-repeat 0 -24px; padding:0 10px; line-height:24px; }

#macstyle div.tag_select_hover { display:block; color:#000; width:71px; height:24px; background:transparent url("../images/mac-select.gif") no-repeat 0 0; padding:0 10px; line-height:24px; }

#macstyle div.tag_select_open { display:block; color:#000; width:71px; height:24px; background:transparent url("../images/mac-select.gif") no-repeat 0 -48px; padding:0 10px; line-height:24px; }

#macstyle ul.tag_options { position:absolute; margin:-4px 0 0; list-style:none; background:transparent url("../images/mac-select.gif") no-repeat left bottom; width:100px; padding:0 0 5px; margin:0; width:71px; }

#macstyle ul.tag_options li { background:transparent url("../images/mac-select.gif") repeat-y -91px 0; display:block; width:61px; padding:0 0 0 10px; height:24px; text-decoration:none; line-height:24px; color:#000; }

#macstyle ul.tag_options li.open_hover { background:transparent url("../images/mac-select.gif") no-repeat -162px 0; color:#000 }

#macstyle ul.tag_options li.open_selected { background:transparent url("../images/mac-select.gif") no-repeat -162px -24px; color:#fff }

#tm2008style div.tag_select { display:block; color:#000; width:82px; height:22px; background:transparent url("../images/tm2008-select.gif") no-repeat 0 0; padding:0 10px; line-height:22px; }

#tm2008style div.tag_select_hover { display:block; color:#000; width:82px; height:22px; background:transparent url("../images/tm2008-select.gif") no-repeat 0 -22px; padding:0 10px; line-height:22px; }

#tm2008style div.tag_select_open { display:block; color:#000; width:82px; height:22px; background:transparent url("../images/tm2008-select.gif") no-repeat 0 -44px; padding:0 10px; line-height:22px; }

#tm2008style ul.tag_options { position:absolute; margin:0; list-style:none; background:transparent url("../images/tm2008-select.gif") no-repeat left bottom; width:100px; padding:0 0 1px; margin:0; width:80px; }

#tm2008style ul.tag_options li { background:transparent url("../images/tm2008-select.gif") repeat-y -102px 0; display:block; width:61px; padding:0 10px; height:22px; text-decoration:none; line-height:22px; color:#000; }

#tm2008style ul.tag_options li.open_hover { background:transparent url("../images/tm2008-select.gif") no-repeat 0 -88px; color:#000 }

#tm2008style ul.tag_options li.open_selected { background:transparent url("../images/tm2008-select.gif") no-repeat 0 -66px; color:#19555F }

student-ai 2013-01-24
  • 打赏
  • 举报
 回复
看到你放在<td>里面的,<td>的高度貌似不可以改.. 简单写了个，你看下是不是要这样的效果。。。 

<select name="find"  multiple="multiple">
        <option value = "/home/test/a">高级</option>
        <option value = "/home/test/b">cu</option>
        <option value = "/home/test/c">tomer</option>
        <option value = "/home/test/d">mer</option>
        </select>
zw20087055 2013-01-24
  • 打赏
  • 举报
 回复
ImN1 2013-01-22
  • 打赏
  • 举报
 回复
要控制select，只能取巧 1.外面套一个div，控制div向内收缩（参数适当取负值），目的是遮盖select的边框 2.对这个div做相关美化，例如透明的背景图，遮盖下拉的三角形符号 …… 反正这个外层的div可以做很多事……
fzfei2 2013-01-22
  • 打赏
  • 举报
 回复
select高度 不能改吧
xiaofan_sap 2013-01-22
  • 打赏
  • 举报
 回复
试试 line-height 可以用么
ImN1 2013-01-22
  • 打赏
  • 举报
 回复
select是窗体级控件，css未必适用呢
shiyjbd 2013-01-22
  • 打赏
  • 举报
 回复
<select id="" name="" style="width: 115px; height:25px;font-size:16px">
html 下拉框高度,如何自定义设置select下拉框高度的优化方法
在项目开发中经常会遇到select下拉框优化问题，默认的样式简直难看到死，所以大家都会想到去设置select高度问题，当然一些组件或者插件也可以实现对其完美优化，我之前的一篇文章也写到了相关优化方法《如何修改select默认option数量多余显示滚动条查看》大家可以去看一下，今天这篇文章整理是我在网上搜集的一篇完美解决select下拉框高度的解决方法，相当简单。我们想要实现的效果是出现下拉框之后...
select的高度设置问题
对于select设置：通过height:90px;这样达不到高度设置的目的，一般我们是通过字体大小来撑开select的高度
el-select动态改变collapse-tags导致input框高度异常问题解决
通过检查我们可以发现，容器的高度是直接用行内式设置的，说明很有可能是通过js来计算的，让我们找到element-ui的源码。最近在实现一个可折叠的筛选栏时遇到了一个el-select高度不会自适应的bug。一个可以折叠和收起的筛选栏，设计思路是折叠时尽可能少的占用空间，展开后尽可能完全的展示筛选的条件。如上图，展开后，已选中标签的tags的布局会错乱，会根据最高的select框的高度来计算，通过检查可得知。如上图，这是展开时的样式，所有已选的筛选条件会被展示出来，此时select框的高度会自适应的变化。
bootstrap-select 下拉列表高度调整
使用bootstrap-select下拉列表有的时候列表数据过多时，高度太高造成modal窗口错乱，如下 可以通过修改bootstrap-select.min源码解决，如下高度最高200px this.$menuInner.css({"max-height":t>200?200:t+"px","overflow-y":"auto","min-height":l+"px"}) 修改后的效...
SELECT 高度问题 ....................

关于select 下拉列表高度的控制问题。在开发过程中我需要显示全部的下拉选项，采用css控制 height 属性是不起作用的在IE浏览器下，所以可以采用 size属性控制select 的高度。
CSS

61,123

社区成员

60,705

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章