by 清泉
25. 六月 2009 10:34
select控件用CSS不太好控制，!在style里写上 width:**px;这个可以实现. 但height:**px; 这个就实现不了. 只能通过调整里面字体的大小来改变高度.同时background可以实现,但用背景图就不行了.select的border是默认的蓝色, CSS用border属性是改变不了的. 只有通过层伪装的方法才能让边框改变，先建一个带有预想边框的层, 在里面放上select,其中select的尺寸要比div稍微大一点,让超出层的内容隐藏从而遮盖住select自带的边框.
<div style="border:solid 1px #ffcc00; width:100px; height:20px;overflow:hidden;">
<select name="select" style="width:105px; height:25px; margin-left:-1px; margin-top:-1px;" name="select" >
<option value="1">普通会员</option>
<option value="2">二级分会或地方分会</option>
<option value="3">协会</option>
</select>
</div>
用这种方法即可以让select没有边框,也可以改变边框. 但这只限于select的list状态. 当显示成multiple状态的时候,在IE里都会有一框深限的痕迹,在FF里没有!
下面是使用层模仿SELECT的另一个范例
div模仿SELECT使用CSS控制select效果截图
div模仿SELECT使用CSS控制select效果详细代码
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<style>
A {
CURSOR: hand;FONT-SIZE: 12px; COLOR: blue; TEXT-DECORATION: none
}
A:link {
FONT-SIZE: 12px; COLOR: blue; TEXT-DECORATION: none
}
A:active {
FONT-SIZE: 12px; COLOR: red; TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px; COLOR: #800080; TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px; MARGIN: 0px; COLOR: #cc0033; TEXT-DECORATION: blink
}
p {
FONT-SIZE: 12px;line-height:180%; MARGIN: 0px; PADDING: 3px; overflow:hidden
}
LI {
PADDING: 0px; LIST-STYLE-TYPE: none
}
</style>
</head>
<body>
<div style="position: absolute; width: 150px; height: 20px; z-index: 1; left: 61px; top: 27px;border:1px solid #00f; background: url('http://bbs.blueidea.com/attachments/2007/7/19/20070719_5c57e127cc94fbb03085bCENkx33ljmA.gif') no-repeat right center;text-align: left;font-size:12px;padding-top:3px;padding-left:5px;padding-right:20px;overflow:hidden
" id="layer1" onclick="show_s_div()">
请选择...</div>
<div style="position: absolute; width: 400px; height: 130px; z-index: 2; left: 61px; top: 46px;display: none;overflow:scroll;overflow-x:hidden;padding:1px;border:1px #00f solid;
SCROLLBAR-FACE-COLOR: #fcfcfc;
SCROLLBAR-HIGHLIGHT-COLOR: #6c6c90;
SCROLLBAR-SHADOW-COLOR: #ccf;
SCROLLBAR-3DLIGHT-COLOR: #fcfcfc;
SCROLLBAR-ARROW-COLOR: #99f;
SCROLLBAR-TRACK-COLOR: #eef;
SCROLLBAR-DARKSHADOW-COLOR: #48486c;
SCROLLBAR-BASE-COLOR: #fcfcfc " id="layer2">
<span style="padding-left:-20px;width:400;height:300" id="sp">
<span style="width:600px"><a href="../0.htm">做一个客户</a></span>
<span style="width:600px"><a href="#2">网站需要一个跳转菜单</a></span>
<span style="width:600px"><a href="#3">可是由于产品名称太长</a></span>
<span style="width:600px"><a href="#4">把整个侧栏都撑开了</a></span>
<span style="width:600px"><a href="#5" style="color:red">但要是固定宽度的话</a></span>
<span style="width:600px"><a href="#6">产品的名称就看不全了</a></span>
<span style="width:600px"><a href="#7">我所希望的是能不能有什么方法让宽度固定</a></span>
<span style="width:600px"><a href="#8">但下拉列表适应文字宽度</a></span>
<span style="width:600px"><a href="#9">或者像图2一样保持宽度不变但鼠标在上时有类似于windows那样的显示</a></span>
<span style="width:600px"><a href="#10">做一个客户</a></span>
<span style="width:600px"><a href="#11" style="color:red">网站需要一个跳转菜单</a></span>
<span style="width:600px"><a href="#12">可是由于产品名称太长</a></span>
<span style="width:600px"><a href="#13">把整个侧栏都撑开了</a></span>
<span style="width:600px"><a href="#14">但要是固定宽度的话</a></span>
<span style="width:600px"><a href="#15">产品的名称就看不全了</a></span>
<span style="width:600px"><a href="#16">我所希望的是能不能有什么方法让宽度固定</a></span>
<span style="width:600px"><a href="#17">但下拉列表适应文字宽度</a></span>
<span style="width:600px"><a href="#18">或者像图2一样保持宽度不变但鼠标在上时有类似于windows那样的显示</a></span>
<span style="width:600px"><a href="#19" style="color:red">OK</a></span>
</span>
</div>
<script>
function show_s_div(){
document.getElementById("layer2").style.display=(document.getElementById("layer2").style.display=="block")?"none":"block"
}
document.getElementById("sp").onmouseover=gettitle;
document.getElementById("sp").onmouseout=restoretitle;
document.getElementById("sp").onmousedown=clickit;
var temptitle=''
var o
function gettitle(){
o=event.srcElement;
if (o.tagName=="A" ||o.tagName=="SPAN"&&document.all.item(o.sourceIndex+1).tagName=="A" ){
o=(o.tagName=="SPAN")?document.all.item(o.sourceIndex+1):o
o.parentElement.style.background='#0f0'
}
}
function restoretitle() {
o.parentElement.style.background='#fff'
}
function clickit(){
document.getElementById('layer1').innerText=o.innerText.substr(0,10)
show_s_div()
}
</script>
</body>
</html>
div模仿SELECT使用CSS控制select所有文件：层模仿select.rar (4.29 kb)
订阅