HTML元素对象的clip实现可填写的下啦列表

clip属性，基本上dom对象都有这个属性，用来剪切对象的可见范围。

语法：

HTML	{ clip : sClip }
Scripting	object.style.clip [ = sClip ]

值：

sClip

字符串值，如下两种类型： auto 默认。 显示整个对象。 rect(top right bottom left) 4个参数设置上右下左被剪切的长度。

以object的左上角为坐标原点，x轴向左，y轴向下，跟屏幕的坐标系方向一致，只是移动了原点。

在这个坐标系中，设置一个clip，这个clip的top，right,bottom,left 的位置由以上几个参数设置，在这个clip的范围之内才可以显示。之外的为透明。

注意：position的属性必须为absolute。

 

利用这个特性，可以做既可以写又可以选择的下拉框。

原理就似乎利用一个input和一个select，将二者重合，并且剪切select，只显示select的下拉按钮。

代码如下：

<select id="slt" name="slt" style="position:absolute; width:200px; left:50px; clip:rect(0px 200px 25px 180px)" onchange="document.getElementById('txt').value=this.options[this.selectedIndex].text;">
  <option value="0" selected="selected"></option>
  <option value="1">1</option>
  <option value="2">2</option>
 </select>
 <input type="text" id="txt" style="left:50px; width:190px; position:absolute;" />