美化与模拟Select
星期二 05.30.2006 - Posted in 工作分享, - 4,682 views
CSS模拟实现
此方法来自已经不存在的苏小雨2003版个人主页，通过2个容器模拟，并定义select偏移。第一次看到确实很惊艳。
#sel_exterior { border:#366 1px solid; overflow:hidden; width:73px; clip:rect(0px 181px 18p...
CSS模拟实现
此方法来自已经不存在的苏小雨2003版个人主页，通过2个容器模拟，并定义select偏移。第一次看到确实很惊艳。
#sel_exterior { border:#366 1px solid; overflow:hidden; width:73px; clip:rect(0px 181px 18px 0px); height:20px;}
#sel_inside { border:#f3f3f3 1px solid; overflow:hidden; width:71px; clip:rect(0px 179px 16px 0px); height:18px}
select#sel { font-size:12px; text-align:center; width:74px; color:#666;
#sel_inside { border:#f3f3f3 1px solid; overflow:hidden; width:71px; clip:rect(0px 179px 16px 0px); height:18px}
select#sel { font-size:12px; text-align:center; width:74px; color:#666;
line-height:14px; position:relative; top:-2px; left:-2px;}[/code]
HTC绑定CSS到select后，可以进行批量渲染，没有定义宽度，所以option内文字长度自适应。
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="select_ready()" />
<script language="JavaScript">
function select_ready() {
if (this.style.position != 'relative') {
this.style.fontSize = 12;
this.style.position = 'relative';
this.style.left = -2;
this.style.top = -2;
var w = this.clientWidth - 1;
var h = this.clientHeight - 1;
this.outerHTML = '<span style="border: 1px solid #366; height: ' + h + '; width: ' + w + ';"><div style="border: 1 solid #f3f3f3; overflow: hidden; width: ' + (w-2) + '; height: ' + (h-2) + '">' + this.outerHTML + '</div></span>';
}
}
</script>
<script language="JavaScript">
function select_ready() {
if (this.style.position != 'relative') {
this.style.fontSize = 12;
this.style.position = 'relative';
this.style.left = -2;
this.style.top = -2;
var w = this.clientWidth - 1;
var h = this.clientHeight - 1;
this.outerHTML = '<span style="border: 1px solid #366; height: ' + h + '; width: ' + w + ';"><div style="border: 1 solid #f3f3f3; overflow: hidden; width: ' + (w-2) + '; height: ' + (h-2) + '">' + this.outerHTML + '</div></span>';
}
}
</script>
不支持standard模式，支持IE6.0和FF1.5
效果演示：http://www.rexsong.com/blog/attachments/200605/29_223027_select_css.htm
DHTML模拟实现
此方法来自cisco首页，用了图片，又费了N多功夫实现。这是提取并整理出来的代码，首次加载还有点问题。
不支持standard模式，支持IE6.0和FF1.5
效果演示：http://www.rexsong.com/blog/attachments/200605/29_223032_select_dhtml.htm
类似效果参考
弄了个模拟的列表框 http://www.blueidea.com/bbs/newsdetail.asp?id=1148331
Select Replacement Test Form http://domscripting.com/presentations/sxsw2006/examples/select/after.html
Bookmark
Delicious http://del.icio.us/url/e05e0c8f297c6c3d5cba450af8f39f2f
© 一叶千鸟（转载请留原文链接，更新于2009年08月31日0点）
这个我以前也看到，可民惜当时没保存下来，后来要用又去看，他的主页都已经不在了，呵呵…
05.30.2006 9:02 上午 - 1楼最好是把xp的主题关掉比较好看，看着也顺眼。
05.30.2006 9:08 上午 - 2楼cisco的是模拟的啊，还是这个方便一点
第一种方法我保存在老版的BLOG里，但是一直没用在实用当中。
05.30.2006 9:09 上午 - 3楼第2种方法是头一次注意啊
第一种2004年后其实流传很广，我第一次看到就是2003在苏小雨个人主页。
第二种是偶然看cisco页面发现的，也是我见过DHTML模拟的比较好的例子。
其他还有类似的也很多，但普遍都实用性不强，好玩。
05.30.2006 9:16 上午 - 4楼htc可以实现很多效果，不过不好
05.30.2006 9:34 上午 - 5楼not so good,美化select元素可以使用DOM+javascirpt+css的方法。
05.30.2006 10:08 上午 - 6楼如：http://domscripting.com/presentations/sxsw2006/examples/select/after.html
我当时第一次见小雨那站，感觉确实做得不错，，
喜欢cisco模拟的样式
05.31.2006 12:07 下午 - 7楼如果有兴趣可以在经典搜搜更早的帖子看，我记得03年之前我们就开始讨论这个了，那个时候图片select做得最像样的是webfx，不过那时候都是围绕IE展开的
05.31.2006 10:41 下午 - 8楼对，以前见过不少，不过大部分找不到了，那天突然看到cisco的，又勾起了回忆。
05.31.2006 10:47 下午 - 9楼此样式甚好！
05.18.2007 8:41 下午 - 10楼朕喜欢！