下拉框css(css手机版下载)
大家好，感谢邀请，今天来为大家分享一下下拉框css的问题，以及和css手机版下载的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
HTML 下拉 列表 框的问题
是可以实现的，只是比较麻烦，参考代码如下：
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
/* CSS Document*/
/* for input_dropMenu*/
body{
line-height:10px;
SCROLLBAR-FACE-COLOR:#eeeedd;
SCROLLBAR-HIGHLIGHT-COLOR:#eeeedd;
SCROLLBAR-SHADOW-COLOR:#666677;
SCROLLBAR-3DLIGHT-COLOR:#666677;
SCROLLBAR-ARROW-COLOR:#666677;
SCROLLBAR-TRACK-COLOR:#efefef;
SCROLLBAR-DARKSHADOW-COLOR:#eeeedd;
}
div{
font-size:9pt;
}
.dropMenu{
overflow:auto;
overflow-x:visible;
height:100%;
border-top:1px solid#aaaabb;
border-left:1px solid#aaaabb;
border-right:1px solid#666677;
border-bottom:2px solid#666677;
background-color:#fdfdfd;
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=#eeeedd);
white-space:nowrap;
}
.dropMenu div{
cursor:Default;
color:#666677;
padding:1px 2px 1px 2px;
padding-top:2px;
script1:expression(
onmouseover=function(){
this.style.background="#0A246A"
this.style.fontWeight="normal"
this.style.color="white"
this.style.paddingLeft="3px"
},
onmouseout=function(){
this.style.background="none"
this.style.fontWeight="normal"
this.style.color="#666677"
this.style.paddingLeft="2px"
},
onclick=function(){
choose_dropMenu(this.parentNode.style.parent1,this)
}
);
}
</style>
</head>
<script language="JavaScript">
// JavaScript Document
/*
=== for input_dropMenu===
=== gotCode 2004-9-21===
*/
function drawShadowDiv(){
sDiv='<div id="shadowDiv"'+
'style="'+
'position:absolute;'+
'left:0px;top:0px;'+
'z-index:1;'+
'background-color:#2C6C85;'+
'layer-background-color:#2C6C85;'+
'display:none;'+
'FILTER:progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=10,finishOpacity=20,startX=0,finishX=0,startY=0,finishY=100);'+
'border:1px solid skyblue;'+
'"></div>'
document.write(sDiv)
}
drawShadowDiv()
function giveItShaow( which, sDiv,type){
if( type=="show"){
sDiv.style.zIndex= which.style.zIndex
sDiv.style.left= which.offsetLeft+ which.parentNode.offsetLeft+ 2;
sDiv.style.top= which.offsetTop+ which.parentNode.offsetTop+ 3;
sDiv.style.width= which.offsetWidth;
sDiv.style.height= which.offsetHeight;
sDiv.style.display="";
}else{
sDiv.style.display="none"
sDiv.style.zIndex= 1
}
}
//===显示下拉框===
/*
current_dropMenu=页面当前下拉框的ID
close_dropMenu=是否可以关闭下拉框
dropMenuGo= setTimeout的变量
*/
var current_dropMenu= null
var close_dropMenu= true
var dropMenuGo= null
function show_dropMenu( which){
current_dropMenu= which
if( dropMenuGo!= null){
clearTimeout(dropMenuGo)
}
//info.innerText= which.style.script1
eval("outSide_"+which.id).style.display=""
which.style.display=""
which.scrollTop= 0
marginTop= parseInt(which.style.marginTop)
if( marginTop<-3){
which.style.marginTop= marginTop+ Math.round(( 0- marginTop)/3)
}else if( marginTop>=-3&& marginTop< 0){
which.style.marginTop= marginTop+ 1
}
if( marginTop>= 0){
clearTimeout(dropMenuGo)
giveItShaow(which,shadowDiv,'show')
return
}
dropMenuGo= setTimeout("show_dropMenu("+which.id+")",10)//
}
//===隐藏下拉框===
function hide_dropMenu(){
if( current_dropMenu!= null){
if( close_dropMenu){
clearTimeout(dropMenuGo)
current_dropMenu.style.display="none"
eval("outSide_"+current_dropMenu.id).style.display="none"
current_dropMenu.style.marginTop= current_dropMenu.parentNode.offsetHeight*(-1)
giveItShaow(current_dropMenu,shadowDiv,'hide')
}
}
}
//===选择下拉框的值===
function choose_dropMenu( which, self){
close_dropMenu= true
hide_dropMenu()
//eval(which).document.body.innerText= self.innerText.substr(0,self.innerText.length-1)
eval(which).value= self.innerText
}
//===除前后空格===
function trim(str){
if( str.substr(0,1)==""){
str= str.substr(1)
}
if( str.substr(str.length-1,1)==""){
str= str.substr(0,str.length-2)
}
return str
}
function replaceFilters( str){
//str= str.replace(//g,"")
str= trim(str)
str= str.replace(/=/g,':')
str= str.replace(/:/g,':"')
str= str.replace(//g,'')
str= str.replace(/:"\/\//g,'://')
str= str.replace(/javascript:"/g,'javascript:')
str= str.replace(/,/g,'",')
str= str+'"'
str= str.replace(/""/g,'"')
str="{"+ str+"}"
return str
}
/*
type=变量名称
defaultVariables=默认的值（不能为空）
*/
function setFilters( type, defaultVariables){
if( filters[type]== undefined){
if( defaultVariables== undefined){
defaultVariables=""
}
eval( type+"=defaultVariables")
}else{
eval( type+"=filters[type]")
}
}
var getStr, cTmpStr
function Separate_Str(){
getStr=""
for( i= 0; i< cTmpStr.length; i++){
if( cTmpStr.substr(i,1)==""){
cTmpStr= cTmpStr.substr(getStr.length+1)
return getStr
}
getStr= getStr+ cTmpStr.substr(i,1)
}return getStr
}
//===drawDropMenu===
/*
iAutoID=自动编号
id=输入框的值
*/
var iAutoID= 0;
function SS_drawDropMenu( filter){
iAutoID++
if( filter== undefined){
filters={}
}else{
eval("filters="+ replaceFilters( filter))
}
setFilters("id","inputFrame"+iAutoID)
setFilters("form","")
setFilters("maxlength","")
setFilters("cItem","没有选项")
setFilters("value","")
setFilters("startColor","white")
setFilters("endColor","#eeeedd")
setFilters("onfocus","'javascript:;'")
setFilters("onblur","'javascript:;'")
setFilters("onmouseover","'javascript:;'")
setFilters("onmouseout","'javascript:;'")
setFilters("onmouseup","'javascript:;'")
setFilters("onmousedown","'javascript:;'")
setFilters("onkeyup","'javascript:;'")
setFilters("onkeydown","'javascript:;'")
setFilters("onchange","'javascript:;'")
if( form!=""){
parent1= form+"."+id
}else{
parent1= id
}
//---建立下拉框选项的html语句---
var itemCount//-下拉框选项的循环次数
var itemHtml=""//-html语句
var dropMenuHeight=""
var inputSize= 0//-下拉框的高度
itemCount= cItem.split('').length
cTmpStr= cItem
for( var i= 0; i< itemCount; i++){
menuValue= Separate_Str()
itemHtml= itemHtml+'<div>'+menuValue+'</div>\n'
if( menuValue.length> inputSize){
inputSize= menuValue.length
}
}
if( itemCount< 5){
dropMenuHeight=(17* itemCount+3)
}else{
dropMenuHeight= 88
}
setFilters("size", inputSize*2)
//---end---
oHtml='<div id="input_dropMenu'+id+'" style="display:inline;height:21px;">\n'+
'<table border="0" cellspacing="0" cellpadding="0">\n'+
'<tr>\n'+
'<td style="font-size:9pt;border:1px solid black;border-right:0px;">\n'+
'<input name="'+id+'" type="text" value="'+value+'" size="'+size+'" maxlength="'+maxlength+'" style="font-size:9pt;border:0px solid black;"'+
' onfocus='+onfocus+
' onblur='+onblur+
' onmouseover='+onmouseover+
' onmouseout='+onmouseout+
' onmouseup='+onmouseup+
' onmousedown='+onmousedown+
' onkeyup='+onkeyup+
' onkeydown='+onkeydown+
' onchange='+onchange+
'>'+
'</td>\n'+
'<td width="16px" style="font-size:9pt;border:1px solid black;border-left:0px;border-right:0px;">\n'+
'<div style="'+
'font-family:webdings;'+
'overflow:hidden;'+
'height:18;'+
'margin-left:-1px;'+
'border:2px solid outset;'+
'FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='+startColor+',endColorStr='+endColor+');'+
'"'+
' onmousedown="this.style.border=\'2px inset\'"'+
' onmouseup="this.style.border=\'2px outset\'"'+
' onmouseover="this.style.border=\'2px outset\'"'+
' onmouseout="this.style.border=\'2px outset\'"'+
'>\n'+
'<div style="'+
'font-size:9pt;'+
'margin-top:-3px;'+
'margin-left:1px;'+
'cursor:hand;'+
'color:#444444'+
'"'+
' onClick="show_dropMenu(dropMenu'+id+')"'+
' onmousedown="this.style.marginLeft=\'2px\';"'+
' onmouseup="this.style.marginLeft=\'1px\'"'+
' onselectstart="return false"'+
'>6</div>\n'+
'</div>\n'+
'</td>\n'+
'</tr>\n'+
'<tr>\n'+
'<td colspan="2">\n'+
'<div id="outSide_dropMenu'+id+'"'+
' class="outSideDropMenu"'+
' onselectstart="return false"'+
'style="'+
'display:none;'+
'position:absolute;'+
'z-index:21;'+
'margin-top:-1px;'+
'height:'+dropMenuHeight+'px;'+
'width:100%;'+
'overflow:hidden;'+
'overflow-x:visible;'+
'border:0px solid black;'+
'">\n'+
'<div id="dropMenu'+id+'" class="dropMenu" style="margin-top:expression(this.parentNode.offsetHeight*(-1));parent1:'+parent1+'" onMouseover="close_dropMenu=false;" onMouseout="close_dropMenu=true;">\n'+
itemHtml+
'</div>\n'+
'</div>\n'+
'</td>\n'+
'</tr>\n'+
'</table>\n'+
'</div>\n'
document.write(oHtml)
}
</script>
<body onMousedown="hide_dropMenu();">
<form name="form1" method="post" action="">
姓名:
<input name="cName" type="text" id="cName" size="10">
<br>
年龄:
<input name="iAge" type="text" id="iAge" size="10">
<br>
职位:<script>SS_drawDropMenu('id=kkk,form=form1,cItem=科员科长所长局长')</script><script>SS_drawDropMenu('id=kkk2,form=form1,cItem=科员科长所长局长')</script>
<input name="dd" type="button" value="提交" onclick="alert(form1.kkk.value)">
</form>
<p></p></body>
</html>
怎么做百度搜索的下拉框
1、实现该功能需依赖jquery.js，jquery.autocomplete.js，先引入这两个js包，以及jquery.autocomplete.css样式文件，如图所示。
2、该不全插件要结合input元素使用，也就是在input中进行搜索时，会达到自动提示补全的效果，在html文件中定义input元素，以下是部分代码截图，如图所示。
3、那么使用autocomplete自动补全插件，也就非常简单了，下面下介绍一下最简单的使用方法，只要把要搜索的数据放进一个数组之中即可，
var language= [
"Chinese",
"English",
"Spanish",
"Russian",
"French",
"Japanese",
"Korean",
"German"
];
然后使用
$("#end").autocomplete({
source: [
language
]
});即可，代码如图所示。
4、下面可以看一下运行结果，比方说搜索带有C字的语言，如图所示。
5、下面看一下怎么和后台数据结合起来，可以与ajax一起使用，将ajax返回的数据作为上面的数组，直接赋给autocomplete插件使用，代码如图所示。
6、下面可以看一下真是的效果，可以看到，搜索“上”字之后，可以自动查询出数据库中所有带有上字的地址，这样下拉框便做出来了，如图所示。
给select下拉框设置高度!
给select下拉框设置高度，可以通过以下几种方法实现：
使用HTML和JavaScript：
设置size属性：可以通过设置select元素的size属性来控制下拉框显示的行数。例如，<select size="5">会使下拉框默认显示5行选项。
动态调整：结合JavaScript的onmousedown和onblur等事件，可以动态调整下拉框的高度。当用户点击下拉框时，如果选项数量超过一定数量（如6个），就将size属性设置为一个较大的值（如7），以便显示更多选项。当用户离开下拉框或选项改变时，再将size设置回默认值（如0），恢复为默认的下拉显示方式。
使用CSS：
容器控制：虽然select元素的高度不能直接通过CSS设置，但可以通过设置包含select元素的容器的高度，并通过overflow属性来控制超出部分是否显示滚动条。这种方法虽然不能直接改变下拉框本身的高度，但可以影响下拉框显示区域的外观，使其看起来像是设置了高度。
绝对定位与动态计算：将select元素设置为position: absolute;脱离文档流，然后通过JavaScript动态计算并设置其高度。这种方法需要较复杂的计算和布局调整，但在某些特定场景下可能有效。
使用bootstrap-select插件：
data-max-height属性：如果使用bootstrap框架，可以利用bootstrap-select插件来方便地设置下拉菜单的高度。只需在select元素中添加data-max-height属性，并设置所需的高度值（以像素为单位）即可。
CSS自定义：此外，还可以通过CSS来自定义下拉菜单的最大高度，并在需要时添加滚动条。这种方法结合了bootstrap-select插件的便利性和CSS的灵活性，可以实现较为复杂的布局和样式需求。
以上方法各有优缺点，在实际应用中应根据具体需求和环境选择合适的方法。同时，为了确保兼容性和可维护性，建议遵循最佳实践和规范进行开发。
关于下拉框css，css手机版下载的介绍到此结束，希望对大家有所帮助。