前言：
学程序都是常学常忘，所以把思路和心得都记录下来，那怕是很简单的东西，所以就有了这篇文章
需求：
因项目需要一个可填可写的DropDownList ；
原理：
任何ASP.NET Server Control呈现在Client的都是HTML代码，所以我从HTML角度分析，可填可写的DropDownList是由一个INPUT控件和SELECT控件经过剪切叠加组合而成；
分析：
先运行下面一段HTML代码，这段HTML演示了一个可填可写的HTML SELECT控件:
1
<html>
2 <body>
3 <input id="txtTest" type="test" style="200px;POSITION: absolute">
4 <select id="ddlTest" onchange="document.getElementById('txtTest').value=this.options[this.selectedIndex].text" style="217px;CLIP: rect(auto auto auto 200px); POSITION: absolute">
5 <option>tt</option>
6 <option>dd</option>
7 </select>
8 </body>
9</html>
10
这段代码的关键是CSS2的rect ( number number number number )元素，理解了这个元素整个控件就OK啦，CSS2 handbook的解释：<html>2
<body>3
<input id="txtTest" type="test" style="200px;POSITION: absolute">4
<select id="ddlTest" onchange="document.getElementById('txtTest').value=this.options[this.selectedIndex].text" style="217px;CLIP: rect(auto auto auto 200px); POSITION: absolute">5
<option>tt</option>6
<option>dd</option> 7
</select>8
</body>9
</html>10
| rect ( number number number number ) | : |
当我看到这段文字的时候，我还是不能感性地认识这段文字的含义，如果你有和我一样的感觉，不妨按下面的方式测试一下:
做两个select控件，一个有rect css标记，一个没有，对有rect(number number number number )标记的，对其中的一个number设置某个值，其余为auto,然后比对一下就很直观了
也很容易知道，要做这个控件，只需对rect(number number number number )最后一个number设置一个值，其余都为auto,那么这个number的设置有什么规则呢 ？先看下图：
我测试发现有向下的箭头部分的长度大约17px，所以就有这样一个规律：
select控件的长度＝input textbox控件的长度+17px
也就是说，如果我希望在页面上呈现一个217px的可填可写的select控件，就可以设置如下：
input textbox : 200px
select控件 : 217px
rect设置 ：rect(auto auto auto 200px )
封装：
把上面的HTML封装成一个server control，这样使用方便，而且可以复用，我把控件代码和调用测试代码都打包，有兴趣的可以下载看看，当然了，封装的不是很好，但既然知其所以然了，知其然还不容易，本来这个东西也不复杂，
Source Code DownLoad