上一篇
下一篇
用CSS制作可输入式Select下拉框
作者:techmango 日期:2010-07-01
在Winform里面有一个combox,它是一个可输入式的Select下拉框，而在Webform里却没有，我们只能自己用CSS制作一个．在这里，我们会用两个关键的CSS属性：POSITION: absolute;和rect(*).
有了POSITION: absolute;就可以利用left及top来设置固定坐标，使得输入输入框跟下拉框的位置重合，然后用Rect来剪切下拉框的显示区域，只显示箭头部分．下面是Rect的语法解释：
－－－－－－－－－－－－－－－－－－
clip : auto | rect ( number number number number )
取值：
auto : 默认值。对象无剪切
rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切
说明：
检索或设置对象的可视区域。可视区域外的部分是透明的。
此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ，此属性方可使用。
自IE5开始，此属性在MAC平台上可用。
对应的脚本特性为 clip 。
－－－－－－－－－－－－－－－－－－
下面我自己做的实例，其中expression用来兼容IE浏览器的，因为它跟火狐浏览器的坐标位置有一些偏差．
<html>
<head>
<style type="text/css">
.fixPosDropDown
{
LEFT: 150px; TOP: 47px;
LEFT: expression("130px"); TOP: expression("12px");
WIDTH: 150px; HEIGHT: 16px;
CLIP: rect(0px 180px 110px 128px); POSITION: absolute;
}
.fixPosInput
{
LEFT: 130px; TOP: 47px;
LEFT: expression("120px"); TOP: expression("12px"); WIDTH: 152px;
POSITION: absolute;
}
</head>
<body>
Status:<select id="ddl_EventStatus" class="fixPosDropDown">
<option value="">--</option>
<option value="2">Start Processing</option>
<option value="3">Succeed</option>
<option value="4">Failed</option>
</select>
<input type="text" id="txt_dropDownInput" class="fixPosInput"/>
</body>
</html>
文章来自: 
引用通告: 
Tags: